CSS 浮动规则

前面介绍过 CSS 浮动的基本概念，这里继续介绍 CSS 浮动的规则。

规则一： 浮动元素的左（或右）外边界不能超过其包含块的左（或右）内边界。

注：浮动元素的包含块指的是其最近的块级祖先元素。

规则二： 浮动元素的左（或右）外边界必须是源文档中之前的左浮动（或右浮动）元素的右（左）外边界，除非后出现浮动元素的顶端在先出现浮动元素的底端下面。

规则三： 左浮动元素的右外边界不会在其右边右浮动元素的左外边界的右边。一个右浮动元素的左外边界不会在其左边任何左浮动元素的右外边界的左边。

规则四： 一个浮动元素的顶端不能比其父元素的内顶端更高。如果一个浮动元素在两个合并外边距之间，放置这个浮动元素时就好像在两个元素之间有一个块级父元素。

规则五： 浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高。

规则六： 如果源文档中一个浮动元素之前出现另一个元素，浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高。

规则七： 左（或右）浮动元素的左边（右边）有另一个浮动元素，前者的右外边界不能在其包含块的右（左）边界的右边（左边）。

规则八： 浮动元素必须尽可能高地放置。

规则九： 左浮动元素必须向左尽可能远，右浮动元素则必须向右尽可能远。位置越高，就会向右或向左浮动得越远。

详细内容请关注微信公众号