浮动溢出:在非IE浏览器下,当容器的高度为auto,且容器内部有浮动元素的时候,容器的高度不能自动伸长以适应内容的高度,使得内容伸展到容器外面而影响甚至破坏布局的现象叫做浮动溢出。为了防止这种现象的出现而进行的css处理叫做清除浮动。
清除浮动的方法:
1、使用带clear属性的空元素,例如<div style="clear:both"></div>
2、给父容器元素添加overflow属性,在IE6下还要触发haslayout,设置zoom:1或容器宽高。在添加overflow属性后,浮动元素又回到了容器层,将容器的高度撑起来,达到了清除浮动的效果。
3、给浮动容器的容器也添加浮动属性即可清除内部浮动,但这样会使整体浮动,影响布局。
4、给浮动元素后面的元素添加clear属性
5、使用css的伪元素:after配合content属性,例如在浮动元素的容器元素使用:
.clearfix{
zoom: 1;//触发IE6的haslayout
}
.clearfix:after{
content: "020"; display: block; height: 0; clear: both; visibility: hidden; }总结:
1、通过clear来清除
2、使容器变为bfc,达到包含浮动元素的目的