深刻理解css之BFC

BFC的定義

BFC的全稱是block formatting context（塊狀格式化上下文），當BFC起做用的時候，其元素內部不管怎麼翻江倒海都不會影響到外部元素，一樣，外部元素的變化也不會影響到BFC內部元素，這就跟結界同樣，你能夠理解爲有一個很強的護盾在包裹着BFC元素，這也是爲何BFC元素不會發生margin重疊的緣由。

引發BFC的條件

BFC起做用不須要特別多的條件，知足如下狀況都會引發BFC：

• html根元素
• float不爲none的元素
• overflow爲auto、hidden或scroll的元素
• position不爲relative或none的元素
• display爲inline-block的元素
• table-cell、table-row或者table-caption元素

在清除浮動的時候，只要元素知足以上這些狀況，就不須要再加clear屬性。

BFC與自適應佈局

在以前的文章中，咱們有說到過float實現的文字環繞效果，這時候若是給文字加上overflow:hidden就能夠實現兩欄自適應佈局。這樣實現的好處是文字的寬度是自適應的，不管圖片是多大或多小，排版都不會亂。代碼和效果以下：

.fl {
    float: left;
    width: 100px;
    margin-right: 10px;
}
.content {
    overflow: hidden;
}

<div>
    <img src="./card.jpg" alt="" class="fl">
    <div class="content">
        這裏是文本展現，這裏是文本展現，這裏是文本展現，這裏是文本展現，這裏是文本展現，這裏是文本展現，這裏是文本展現，
        這裏是文本展現，這裏是文本展現，這裏是文本展現，這裏是文本展現，這裏是文本展現，這裏是文本展現，這裏是文本展現
    </div>
</div>

圖片和文字之間若是須要間距，能夠在圖片中設置margin-right的值或者透明border，也能夠在內容區設置透明border，可是不能夠直接在內容區設置margin-left，若是是設置了margin-left，其間距必須是圖片的寬度加上你想設置的間距大小，這樣的間距就會對圖片的大小產生依賴。

與BFC有關的屬性說明

因爲引發BFC的屬性都有一些古怪的特性，並非全部的狀況都適合實現自適應佈局，下面咱們來一一說明下：

• float屬性，設置了float以後，元素自己也會BFC化，因爲具備破壞性和包裹性，也就失去了寬度自適應的特性，因此float並不適合自適應佈局。
• position屬性，position會破壞文檔流，與非定位元素很難結合起來用，所以也不適合自適應佈局。
• overflow:hidden，這個屬性要比float和position好不少，設置了overflow:hidden的元素，總體上跟普通元素差很少，也保留着普通元素的寬度自適應性，可是有一個缺點，就是內容溢出會被裁剪。在平時的開發中，這種場景不是很常見，所以overflow: hidden能夠做爲經常使用的BFC佈局。
• display:inline-block，因爲inline-block會讓元素尺寸包裹，所以也不適用於BFC佈局。
• display:table-cell，table-cell會讓元素表現得跟單元格同樣，其有兩個特性，一個是父元素寬度足夠時，展現的是設置的寬度；第二個是，但元素寬度超出父元素時，展現的是父元素的寬度。所以，table-cell也可用於BFC佈局，其原理就是設置一個足夠多的寬度值，例如3000px，這樣就能夠充分利用瀏覽器的剩餘空間，也不會產生滾動條，內容也是自適應的。
• display:table-row，其對width無感，沒法自適應剩餘瀏覽器空間。
• display:table-caption，沒有任何用處。

總結

• BFC的定義，BFC就如同結界同樣，徹底封閉對外無任何影響。
• 引發BFC的各類屬性
• BFC與自適應佈局
• 自適應佈局與BFC屬性說明