浮动元素float的详细内幕

一些规则控制着浮动元素的摆放，规则如下：

1.浮动元素的左右外边界不能超过其包含块内容区的左右内边界（包含块就是其最近的块级祖先元素）

2.为防止浮动元素彼此覆盖，如果一个元素向左浮动，而另一个元素已经在那个位置，后放置的元素将挨着前一个浮动元素的右外边界放置。但是如果一个浮动元素的顶端在之前所有浮动元素的底端下面，它就可以一直浮动到父元素的内左边界。如下图：



3.假设父元素的宽度为500像素，里面包含了两个300像素的的浮动图像，第一个图像浮动到左边，第二个浮动到右边。这条规则指定由于两个图像的宽度总和超出了父元素的宽度，要求第二个图像向下浮动，直到其顶端在左浮动图像的底端之下，防止两个图像重叠100像素。如下图：



4.一个浮动元素的顶端不能比其父元素的内顶端更高。如果一个浮动元素在两个元素的外边距之间，放置这个浮动元素就好像在这两个元素之间有一个块级元素。前句意思是防止浮动元素一直浮动到文档顶端，后句意思是我们假设有三个段落，中间段落浮动，在这种情况下，浮动段落就会像有一个块级父元素（如div）一样把浮动元素嵌套在里面，防止浮动段落一直向上浮动到三个段落共同的父元素的顶端。如下图：



5.如果源文档中一个浮动元素之前出现另一个元素，就好像一个段落的正中间有一个浮动图像。不允许浮动元素浮动到包含该浮动元素之前内容的行的顶端之上，意思就是这个图像顶端最高只能放在该图像所在行框的顶端。如下图:



6.浮动元素必须尽可能浮动到高的位置

如果浮动元素与流中的内容重叠的话，行内元素与浮动元素重叠的话，行内元素的边框、背景和内容都在该浮动元素之上显示，块级元素的话，其边框和背景在该浮动元素之下显示，而内容在浮动元素之上显示