CSS浮动规则详解（推荐）

 

CSS中float是在一系列详细规则控制浮动元素的摆放位置，可以想象成一个氢气球在封闭盒子里漂浮的平面图。具体的规则有如下几点：

1、浮动元素的左边（右边）外边界不能超出其包含块的左边（右边）的内边界，绝对不会越位溢出的。什么？什么叫包含块？不知道的朋友到前面几篇帖子看看。

2、浮动元素的左边（右边）外边界必须是包含块中之前出现的浮动元素的右边（左边）外边界，请注意前后出现的左右的顺序，也就是说只能挨着先出现的浮动元素的右边边界摆放，除非后出现的浮动元素的顶端在先出现的浮动元素的底端下面。如此，浮动元素之间就不会发生重叠，这也是浮动相比定位的优势所在。另外，浮动元素与其他元素不会发生折叠。

3、左浮动元素的右边外边界不会再其右边右浮动元素的左边外边界的右边，同样，右浮动元素的左边外边界不会出现在其左边浮动元素的右边外边界的左边。这两句是不是有点拗口，说简单点就是，左浮动元素和右浮动元素不会出现水平交叉重叠。如果两个方向浮动的元素总宽超出了包含块，则会让后浮动的元素移动到先浮动元素的下方，然后再浮动。

4、一个浮动元素的顶端绝不能比其父元素的内顶端更高。假如一个浮动元素在两个合并外边距之间，摆放这个浮动元素时就好像在这两个元素之间有一个块父元素。这样的规则，可防止浮动元素浮动至共同父元素的顶端。经实际试验发现，浮动元素会浮动到下一个subling元素的内部顶端，若多个浮动元素，则都浮动到下一个非浮动subling元素内部顶端，也就是下一个非浮动的subling元素会延伸其顶端，将前面的浮动元素框入其内，防止浮动元素浮动到父元素的顶端。

5、浮动元素的顶端不能比先浮动的所有元素或块元素更高。

6、浮动元素顶端不能超越浮动之前包含该元素内容的行的顶端。也就是说，若段落中间有个浮动的图像，浮动后的图像最高只能摆放在图像所在行行框的顶端。

7、浮动元素超出包含块元素边界的情况，浮动元素太大，挤出了边界，另外，设定负的外边距，也可以超出包含块元素边界。

8、浮动元素应该尽可能高地摆放，向左（右）浮动尽可能往左（右）边摆放前提是受前面规则的约束。

另外，当浮动元素与其他元素发生重叠，其内容、边框、背景等该如何显示？CSS2.1规范有说明这些规则（无关出现的先后顺序）：

①、行内框与浮动元素重叠，其边框、背景和内容都在该浮动元素“之上”显示。

②、块框与浮动元素重叠，其边框和背景在该浮动元素“之下”显示，而内容在浮动元素“之上”显示。