关于浮动你不得不知道的知识

首先你得知道浮动属性出现的初衷是“为了实现文字环绕图片的效果”,只是后来被用在了“不正当的方面”。


以下是我总结的16条关于浮动的规则。
1.css允许浮动任何元素，且浮动的元素会从正常的文档流中脱离出来，不过它仍然会影响布局。
2.浮动元素周围的外边距不会合并，不管周围的margin是否是浮动元素的都不会合并。
3.如果浮动一个非替换元素（比如链接），该元素的宽度会尽可能的小。
4.浮动元素的包含块是其最近的块级祖先元素。
5.浮动元素会生成一个块级框，而不论这个元素本身是什么。这个块级框很像display：block的效果，不过不会独占一行的（毕竟有文字环绕效果嘛）。所以浮动元素是没有必要声明display：block的。
6.浮动元素的左（右）外边距不能超出其包含块的左（右）内边界。
7.浮动元素永不重叠。(当然只是理论上，当出现第12条规则的情况时，在视觉上是会重叠的。)
8.浮动元素不会超过包含块的上padding。
9.浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高。
10.满足其他约束条件的前提下，浮动元素会尽可能的高。
11.元素浮动会是包含块塌陷，给包含块也添加浮动就可以把浮动元素包含在内。（一种清除浮动的方法哟）
12.浮动元素设置负的外边距会在视觉效果上感觉像破坏了规则6.7.8.9，其实实质上并没有违背规则。（负外边距的特殊效果）
13.当浮动元素比包含块更宽时，浮动元素会超出内边界，究竟超出的哪个方向的内边界取决于浮动方向。
14.行内框与浮动元素重叠时，其边框、背景、内容都在该浮动元素上面（这里的上面是z-index更高的意思）显示。
15.块级框与浮动元素重叠时，其边框和背景在该浮动元素之下，而内容在浮动元素之上。
16.补充一点：clear只能用于非块级元素，除非将非块级元素display成block。