CSS BFC學習筆記，cssbfc學習筆記

CSS BFC學習筆記，cssbfc學習筆記

BFC，全稱是Block Formatting Context，塊級格式化上下文。
具體是什麼，可以理解為頁面元素的一種特性，觸發了BFC的元素往往會產生一些對初學者而言意想不到的效果。
觸發BFC的方法有下面幾種，滿足其中任意一種就能觸發BFC：

• 浮動元素（float除了none以外任意值）
• 絕對位置元素（position為absolute或fixed）
• display為inline-block或table-cell或table-caption
• overflow為除了visible以外的其他值（hidden、auto或scroll）

那麼BFC有哪些特點呢，為什麼要觸發BFC呢？ 先從幾種現象說起吧。

一、外邊距合并

有以下結構的html

<div>    <p>這是一個段落</p></div><div>    <p>這是一個段落</p></div>

CSS 如下

        body{            margin: 0;        }        div{            background-color: #2595e5;            margin: 10px 0 10px;        }        p{            background-color: #ff9900;            margin: 10px 0 10px;        }

產生效果：

代碼裡給div和p都加上了上下邊距，但是產生的結果來看好像p標籤的上下邊距並沒有生效，而且在垂直方向上，div的邊距只有10px而不是兩個10px，這其實是因為他們產生了外邊距重疊。
簡單地說，外邊距合并指的是，在普通文檔流中，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并後的外邊距的高度等於兩個發生合并的外邊距的高度中的較大者。
如何避免這種效果的發生呢，這將引出BFC的第一個特性：

阻止和子項目發生外邊距摺疊

給div加上overflow：hidden屬性，即觸發BFC的第四個條件：

        div{            background-color: #2595e5;            margin: 10px 0 10px;            /*觸發BFC*/            overflow: hidden;        }

再看效果

由此可見，觸發了BFC的元素，不和它的子項目發生外邊距摺疊。

二、高度塌陷

在使用浮動的時候，經常會出現這種情況：

<div class="outer">    <div class="inner"></div></div>

CSS：

        body{            margin: 0;        }        .outer{            background-color: #2595e5;            border: 1px solid #f00;        }        .inner{            background-color: #ff9900;            width: 50px;            height: 50px;            float: left;        }

效果：

可以看到outer的高度是0，並沒有算上內部浮動的inner，這種現象稱之為高度塌陷。
BFC將能解決這個問題，這就是BFC的第二個特性：

包含浮動元素

同樣的給outer加上overflow：

        .outer{            background-color: #2595e5;            border: 1px solid #f00;            /*觸發BFC*/            overflow: hidden;        }

產生效果：

三、元素被浮動元素覆蓋

這個問題同樣出現在有浮動元素的時候：

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

CSS:

        body{            margin: 0;        }        .left{            width: 50px;            height: 50px;            background-color: #2595e5;            float: left;        }        .right{            background-color: #ff9900;            width: 100px;            height: 100px;        }

產生效果：

可以看到，浮動的元素覆蓋在了其相鄰元素上，解決這個問題將引出BFC的第三個特性：

阻止元素被浮動元素覆蓋

對right添加overflow屬性：

        .right{            background-color: #ff9900;            width: 100px;            height: 100px;            /*觸發BFC*/            overflow: hidden;        }

效果：

這個感覺跟給right也加了float: left一樣，因為使用float: left同樣會觸發BFC（第一個條件）
當然這個情況只出現在兩個元素寬度之和不大於父元素寬度的時候，不然right會換行。

總結

總結一下，觸發了BFC的元素將具有以下特點：

最後需要說明的是IE7以下瀏覽器中並不支援BFC，而是有其特有的hasLayout，它和BFC很相似，但產生了很多問題。觸發hasLayout的方式之一是使用zoom: 1，所以使用的時候最好加上zoom: 1，保證相容性。

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。