送給前端“小白”的純正乾貨

今天的乾貨主題是：你是否對CSS浮動和清除浮動傻傻分不清楚呢？

適合人群：前端小白和初級程序員，大牛可以繞過

廢話少敘，直接開始主題

浮動

概念：浮動是比較常用的前端佈局方式。在CSS中任何元素都可以浮動，且會變成塊級標籤。

特點：1. 浮動的框可以向左或向右移動，直到它的外邊緣碰到父級框或另一個浮動框的邊緣為止；

2. 由於浮動框不在文檔流中，所以文檔流中的塊級框表現的像浮動框不存在一樣。

到這裡有必要對“文檔流”這個概念解釋一下：css中的塊級元素在頁面中是獨佔一行的，自上而下排列，也就是我們所說的流，通常我們稱之為文檔流或標準流。

因此浮動就是使元素脫離文檔流，按照指定的方向（左或右發生移動），直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。起初，W3C規定出來的浮動實際並不是為了佈局所用，當時是為了做文字環繞才使用到浮動，但後來有人用它來做佈局，發現不錯從而被廣為流傳。

取值：left | right | none

以上是浮動取值的表現形式。

浮動這麼好，如此方便，那為什麼還要清除浮動呢？

問題出現了，父元素高度塌陷了。看來浮動雖好，但不能貪戀呀！這時候就該清除浮動！

清除浮動

具體實現方式有以下幾種：

1. 額外標籤法：在浮動元素後面添加一個空白元素

<code>//給元素Float element清除浮動（在Float element後添加一個空白標籤clear(類名可以隨意，設置clear:both;即可
// html
Float element



// css
.fl {
\tfloat: left;
}
.clear {
  clear: both
}/<code>

注意：儘管此法通俗易懂，書寫方便，但不推薦使用，因為添加許多無意義的標籤，結構化比較差。

2. 父級添加overflow方法：可以通過觸發BFC的方式，實現清楚浮動效果。（想了解關於BFC可以私信我）。

<code>// html

  



// css
.father {
  overflow: hidden;
}
.child {
  float: left;
}/<code>

注意：此方法雖然實現方便，但若該父盒子裡還有position定位會引起麻煩，內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素。因此同樣不推薦使用。

3. 偽元素清浮動（強烈推薦）

<code>// html

  



//css
.child{ 

\tfloat: left;
}
.clearfix::after{
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  *zoom: 1;
}/<code>

偽元素是空元素的升級版，不需要再添加實際空標籤。此方法語義機構明確，符合閉合浮動思想。但由於IE6-7不支持：after，故使用zoom：1，觸發hasLayout。

4. 雙偽元素（強烈推薦）

<code>// html
 
  



//css
.clearfix::before, .clearfix::after{
  content: '';
  display: table;
}
.clearfix::after{
  clear: both;
}
.clearfix{
  *zoom: 1;
}/<code>

相比較而言，此方法與第三種類似，代碼實現簡單，結構明確，推薦使用。

怎麼樣？你學會了嗎？

在學習過程中有任何問題都可以在下方留言或私信我，同時也歡迎大家關注我的公眾號“一郭鮮”，裡面有最實用的前端內容，期待你的到來

閱讀更多 一郭鮮 的文章

關鍵字: 乾貨 CSS 程序員