clear清除浮動最佳實踐和BFC清除浮動

浮動的三個特色很重要。

1. 脫離文檔流。
2. 向左/向右浮動直到遇到父元素或者別的浮動元素。
3. 浮動會致使父元素高度坍塌。

那麼clear清除浮動的最佳實踐是什麼呢？cleafix是最外層的div。請看以下代碼：

// 現代瀏覽器clearfix方案，不支持IE6/7
.clearfix:after {
    display: table;
    content: " ";
    clear: both;
}

// 全瀏覽器通用的clearfix方案
// 引入了zoom以支持IE6/7
.clearfix:after {
    display: table;
    content: " ";
    clear: both;
}
.clearfix{
    *zoom: 1;
}

// 全瀏覽器通用的clearfix方案【推薦】
// 引入了zoom以支持IE6/7
// 同時加入:before以解決現代瀏覽器上邊距摺疊的問題
.clearfix:before,
.clearfix:after {
    display: table;
    content: " ";
}
.clearfix:after {
    clear: both;
}
.clearfix{
    *zoom: 1;
}

　　

BFC清除浮動

BFC全稱是塊狀格式化上下文，它是按照塊級盒子佈局的。咱們瞭解他的特徵、觸發方式、常見使用場景這些就夠了。

BFC的主要特徵

✦ BFC容器是一個隔離的容器，和其餘元素互不干擾；因此咱們能夠用觸發兩個元素的BFC來解決垂直邊距摺疊問題。
✦ BFC能夠包含浮動；一般用來解決浮動父元素高度坍塌的問題。

其中，BFC清除浮動就是用的「包含浮動」這條特性。
那麼，怎樣才能觸發BFC呢？

BFC的觸發方式

咱們能夠給父元素添加如下屬性來觸發BFC：
✦ float 爲 left | right
✦ overflow 爲 hidden | auto | scorll
✦ display 爲 table-cell | table-caption | inline-block | flex | inline-flex
✦ position 爲 absolute | fixed

因此咱們能夠給父元素設置overflow:auto來簡單的實現BFC清除浮動，可是爲了兼容IE最好用overflow:hidden。可是這樣元素陰影或下拉菜單會被截斷，比較侷限。

.box-wrapper{
  overflow: hidden;
}

　　

解決父元素高度坍塌的方式就是清除浮動，常規的方法是clear清除浮動和BFC清除浮動，推薦clearfix的方式。必定要弄清楚clear清除浮動的底層原理以及clearfix的那幾行代碼的具體做用。

浮動的適用場景有哪些？

文字環繞效果

這個不用說了，浮動原本就是爲文字環繞效果而生，這是最基本的

文字環繞效果

頁面佈局

浮動能夠實現常規的多列布局，但我的推薦使用inline-block。
浮動更適合實現自適應多列布局，好比左側固定寬度，右側根據父元素寬度自適應。

頁面佈局

多個元素內聯排列

若是前文提到的，浮動能夠實現相似inline-block的排列，好比菜單多個元素內聯排列。但我的推薦使用inline-block。

多個元素內聯排列

做者：齊修_qixiuss 連接：http://www.jianshu.com/p/09bd5873bed4 來源：簡書 著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。