浮动float的一些规则

1.浮动元素的左(或右)外边界不能超出其包含块的左(或右)内边界。

2.如果一个元素左浮动，而另一个元素已经在那个位置，后放置的元素将挨着前一个浮动元素的右外边界放置。不过，如果一个浮动元素的顶端在所有之前浮动图像(元素)的底端下面，它可以一直浮动到父元素(注意和1中的包含块区别)的左内边界。（注意左右边界和边框的区别）这个规则可以避免浮动元素之间重叠

3.左浮动元素的右外边界不会在其右边的任何的右浮动元素的左外边界的右边。一个右浮动元素的左外边界不会在其左边任何的左浮动元素的右外边界的左边。

4.一个浮动元素的顶端不能比其父元素的内顶端更高，如果一个浮动元素在两个合并外边距之间，放置这个浮动元素时就好像在两个元素之间有一个块级父元素。(想象一下三个p,中间的p要浮动时，应用此规则可以避免中间的p一直向上移动到三个段落共同的父元素的顶端)。

5.浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高，意思是后面的浮动元素不能比前面的浮动元素高。

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

7.浮动元素不能超出其包含元素的边界，这能防止多个浮动元素出现在一个水平行上，远远超出其包含块的边界。(如果没有足够的空间，浮动元素会被挤到一个新的行上)

8.浮动元素必须尽可能高地放置。

9.左浮动元素必须向左尽可能的远，右浮动元素必须向右尽可能的远，位置越高就会向左或向右浮动得越远。

 

转载于:https://www.cnblogs.com/lichangzhi/p/5302252.html