float 的9条规则
### 规则1
原文:The left outer edge of a left-floating box may not be to the left of the left edge of its containing block. An analogous rule holds for right-floating elements.
译文:左浮动的盒子的左边界不会超出容器的左边界，右浮动同理.
规则2
原文:If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.
译文:如果盒子是左浮动的,那么在html文档中晚出现的左浮动盒子只允许出现在先出现的左浮动盒子的右边或者晚出现的左浮动盒子的顶部必须在早出现左浮动盒子的底部之下。右浮动同理.
规则3
原文:The right outer edge of a left-floating box may not be to the right of the left outer edge of any right-floating box that is next to it. Analogous rules hold for right-floating elements.
译文:左浮动盒子的右外边缘可能不在其旁边的任何右浮动框的左外边缘的右边，右浮动同理.
规则4
原文:A floating box’s outer top may not be higher than the top of its containing block. When the float occurs between two collapsing margins, the float is positioned as if it had an otherwise empty anonymous block parent taking part in the flow. The position of such a parent is defined by the rules in the section on margin collapsing.
译文:浮动盒子的顶部不能超出容器的顶部边界
规则5
原文:The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.
译文:浮动盒子的顶部不会超出在html文档中早出现的的块级元素(block)或者是浮动元素的顶部
规则6
原文:The outer top of an element’s floating box may not be higher than the top of any line-box containing a box generated by an element earlier in the source document.
译文:浮动盒子的顶部不会超出在html文档中早出现的包含盒子的line-box元素顶部
规则7
原文:A left-floating box that has another left-floating box to its left may not have its right outer edge to the right of its containing block’s right edge. (Loosely: a left float may not stick out at the right edge, unless it is already as far to the left as possible.) An analogous rule holds for right-floating elements.
译文:一个左浮动元素右边的另一个左浮动元素的右边界不会超出容器的右边界,右浮动同理
如果一行之内要放第二个浮动元素，如果放不下了，那就换行。
规则8
原文:A floating box must be placed as high as possible.
译文:一个浮动盒子应该放的尽可能的高
规则9
原文:A left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right.
译文:一个左浮动元素应该放的尽可能的靠左，右浮动元素应该被放的尽可能的靠右。当元素既可以放置”最高”又可以”最右”的时候，优先考虑”最高”。
为什么盒子五不直接放在盒子一下面，这是因为当一个元素既可以放的最左（最右）和最高的时候，优先选择最高，所以这里就放在了盒子四的下面。
finally
最后说两句，浮动元素其实对在它出现之前的元素影响不大，但是由于浮动是使元素脱离了文档流，那么在浮动元素之后出现的元素：
- 块元素:直接无视浮动元素，该怎么显示就怎么显示，并且会被浮动元素覆盖。
- 行内元素:行内元素会环绕在浮动元素周围。
浮动元素的业界公认特点
- 元素被视作块级元素，相当于display设置为”block”；
- 元素具备包裹性，会根据它所包含的元素实现宽度、高度自适应；
- 浮动元素前后的块级兄弟元素忽视浮动元素的而占据它的位置，并且元素会处在浮动元素的下层（并且无法通过z-index属性改变他们的层叠位置），但它的内部文字和其他行内元素都会环绕浮动元素；
- 浮动元素前后的行内元素环绕浮动元素排列；
- 浮动元素之前的元素如果也是浮动元素，且方向相同，它会紧跟在它们后面；父元素宽度不够，换行展示；
- 浮动元素之间的水平间距不会重叠；
- 当包含元素中只有浮动元素时，包含元素将会高度塌陷；
- 浮动元素的父元素的非浮动兄弟元素，忽视浮动元素存在，覆盖浮动元素；
- 浮动元素的父元素的浮动兄弟元素，会跟随浮动元素布局，仿佛处在同一父元素中。
清除浮动
清除浮动的方法, 主要分为两类
- 利用clear属性清除浮动
- 利用bfc原理包容浮动