CSS知識點：清除浮動

開場白

　　咱們平時工做中，很容易遇到浮動效果。一個DIV中嵌套多個DIV，左邊顯示一個DIV，右邊顯示一個DIV，外層DIV的高度隨着內層內容的高度變化。這就是最基本的浮動效果。下圖的百度搜索結果就是一個簡單的例子。

 

什麼是CSS清除浮動？

　　借用W3C的定義。

浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。因爲浮動框不在文檔的普通流中，因此文檔的普通流中的塊框表現得就像浮動框不存在同樣。（其實簡單理解就是浮動的元素就是木板浮在水面上同樣，和水平面不在一個平面上，所以兩個平面的佈局不會互相影響，可是水平面的岸邊仍是會限制木板的活動區域的。）

如下是一個簡單的例子，trapper容器沒有「包住」浮動的元素。

.trapper{
  background-color: gray;
  border: solid 1px black;
  }

.left{
  float: left;
  height:200px;
  width:200px;
  border:solid 1px red;
  }

.right {
  float: right;
  height:200px;
  width:200px;
  border:solid 1px green;
  }

<div class="trapper">
<div class="left"></div>
<div class="right"></div>
</div>

  

清除浮動方法

方法一：帶clear屬性的空元素(簡單，兼容性不錯，可是增長了沒用的html元素，若是浮動元素後邊還有相鄰的元素，能夠給相鄰的元素直接加上clear屬性。)

在浮動元素後使用一個空元素如<div class="clear"></div>，並在CSS中賦予.clear{clear:both;}屬性便可清理浮動。亦可以使用<br class="clear" />或<hr class="clear" />來進行清理。

.trapper{
  background-color: gray;
  border: solid 1px black;
  }

.left{
  float: left;
  height:200px;
  width:200px;
  border:solid 1px red;
  }

.right {
  float: right;
  height:200px;
  width:200px;
  border:solid 1px green;
  }

<div class="trapper">
<div class="left"></div>
<div class="right"></div>
<div class="clear"></div>
</div>

 

方法二：使用CSS的overflow屬性

給浮動元素的容器添加overflow:hidden;或overflow:auto;能夠清除浮動，另外在 IE6 中還須要觸發 hasLayout ，例如爲父元素設置容器寬高或設置 zoom:1。

在添加overflow屬性後，浮動元素又回到了容器層，把容器高度撐起，達到了清理浮動的效果。

.trapper{

  background-color: gray;
  border: solid 1px black;
  overflow:hidden;
　*zoom:1;
  }

.left{
  float: left;
  height:200px;
  width:200px;
  border:solid 1px red;
  }

.right {
  float: right;
  height:200px;
  width:200px;
  border:solid 1px green;
  }

<div class="trapper">
<div class="left"></div>
<div class="right"></div>
</div>

 

方法三：給浮動的元素的容器添加浮動（將容器和內部內容浮動到同一個平面上，這樣影響了佈局，總體浮動不推薦）

 

方法四：使用CSS的:after僞元素

結合 :after 僞元素和 IEhack ， IEhack 指的是觸發 hasLayout。

給浮動元素的容器添加一個clearfix的class，而後給這個class添加一個:after僞元素實現元素末尾添加一個看不見的塊元素（Block element）清理浮動。

.trapper{

background-color: gray;
  border: solid 1px black;
  overflow:hidden;
　*zoom:1;
  }

.left{
  float: left;
  height:200px;
  width:200px;
  border:solid 1px red;
  }

.right {
  float: right;
  height:200px;
  width:200px;
  border:solid 1px green;
  }

.clearfix {
  /* 觸發 hasLayout */ 
  zoom: 1; 
  }

.clearfix:after{
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
  }

<div class="trapper clearfix">
<div class="left"></div>
<div class="right"></div>
</div>

經過CSS僞元素在容器的內部元素最後添加了一個看不見的點"."，而且賦予clear屬性來清除浮動。須要注意的是爲了IE6和IE7瀏覽器，要給clearfix這個class添加一條zoom:1;觸發haslayout。

 推薦使用使用僞元素的方式解決元素浮動問題。

結束語

您有收穫嗎？

但願我沒有浪費您的時間。

謝謝您的耐心閱讀。

若有錯誤或者補充及時更正。