浮動溢出:在非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,達到包含浮動元素的目的