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