清除浮動的方法

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

相關文章
相關標籤/搜索