对其他元素排版的影响
一个元素浮动时，其他非浮动元素的内容会“环绕”该浮动元素。
内容：指css盒模型中的content，width-height部分，不含内外边距和边框
环绕：左浮动，后边的内容出现在右边；右浮动，后边的内容出现的左边
原则：
- 浮动元素会生成一个块级框，无论这个元素本身是否为块级元素
- 浮动元素不能超出包含块的左右边界
- 同一个行的浮动元素不会叠加导致重复
- 浮动元素的顶端不能比其父元素的内顶端更高
- 浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高
- 浮动元素在满足前边约束的情况下，会浮动的尽量高(顶端对齐)
一些注意点：
- 从规则还可以看出，浮动规则只处理了和其父元素的左、右和上边界，没有涉及下边界，所以浮动元素是可以超出其父元素的下边界的。
- 虽然规则上浮动元素不能超出左右上边界，但是可以通过设置负的margin超出边界,但这可能破坏后边内容对浮动元素的环绕，即有可能覆盖原有的内容，所以并不建议使用负的margin值。
- 如果浮动元素的宽度大于父元素的宽度，也会让浮动元素超出父元素的左右边界。
当上述2，3条发生后，被覆盖内容（不是正常环绕的内容）怎么显示？css2.1规定如下：
- 行内元素与一个浮动元素重叠时，其边框、背景和内容都在该浮动元素之上显示
- 块级元素与一个浮动元素重叠时，其边框和背景在该浮动元素之下显示，而内容在浮动元素之上显示
清除浮动
clear: left/right/both;
比较通用的解决方案是在父元素后添加after伪元素块：
.clearfix::after {
content: '';
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.clearfix {
/* 触发IEhasLayout */
zoom: 1;
}
