標籤：

了解一下BFC

07-09
了解一下BFC

來自專欄我愛學前端

CSS規範中對 BFC 的描述

9.4.1 塊格式化上下文

浮動，絕對定位元素，非塊盒的塊容器（例如，inline-blocks，table-cells和table-captions）和overflow不為visible的塊盒會為它們的內容建立一個新的塊格式化上下文

在一個塊格式化上下文中，盒在豎直方向一個接一個地放置，從包含塊的頂部開始。兩個兄弟盒之間的豎直距離由margin屬性決定。同一個塊格式化上下文中的相鄰塊級盒之間的豎直margin會合併

在一個塊格式化上下文中，每個盒的left外邊（left outer edge）挨著包含塊的left邊（對於從右向左的格式化，right邊挨著）。即使存在浮動（儘管一個盒的行盒可能會因為浮動收縮），這也成立。除非該盒建立了一個新的塊格式化上下文（這種情況下，該盒自身可能會因為浮動變窄）

MDN 對 BFC 的描述

一個塊格式化上下文（block formatting context） 是Web頁面的可視化CSS渲染出的一部分。它是塊級盒布局出現的區域，也是浮動層元素進行交互的區域。

一個塊格式化上下文由以下之一創建：

  • 根元素或其它包含它的元素
  • 浮動元素 (元素的 float 不是 none)
  • 絕對定位元素 (元素具有 position 為 absolute 或 fixed)
  • 內聯塊 (元素具有 display: inline-block)
  • 表格單元格 (元素具有 display: table-cell，HTML表格單元格默認屬性)
  • 表格標題 (元素具有 display: table-caption, HTML表格標題默認屬性)
  • 具有overflow 且值不是 visible 的塊元素，
  • display: flow-root
  • column-span: all 應當總是會創建一個新的格式化上下文，即便具有 column-span: all 的元素並不被包裹在一個多列容器中。

一個塊格式化上下文包括創建它的元素內部所有內容，除了被包含於創建新的塊級格式化上下文的後代元素內的元素。

塊格式化上下文對於定位 (參見 float) 與清除浮動 (參見 clear) 很重要。定位和清除浮動的樣式規則只適用於處於同一塊格式化上下文內的元素。浮動不會影響其它塊格式化上下文中元素的布局，並且清除浮動只能清除同一塊格式化上下文中在它前面的元素的浮動。

張鑫旭對 BFC 的描述

zhangxinxu.com/wordpres

BFC全稱」Block Formatting Context」, 中文為「塊級格式化上下文」。啪啦啪啦特性什麼的，一言難盡，大家可以自行去查找，我這裡不詳述，免得亂了主次，總之，記住這麼一句話：BFC元素特性表現原則就是，內部子元素再怎麼翻江倒海，翻雲覆雨都不會影響外部的元素。所以，避免margin穿透啊，清除浮動什麼的也好理解了。

以上都沒什麼用。

舉幾個例子：

功能1： BFC可以保住浮動元素，爸爸管兒子。

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS Bin</title> <style> .baba{ border: 10px solid red; min-height: 10px; display: flow-root; /*觸發BFC*/ } .erzi{ background: green; float:left; width: 300px; height: 100px; } </style></head><body> <div class="baba"> <div class="erzi"> </div> </div></body></html>

這個功能可以用clearfix代替。

功能2：用 float + div 做左右自適應布局

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS Bin</title> <style> .gege{ width: 100px; min-height: 600px; border: 3px solid red; float: left; margin-right: 20px; } .didi{ min-height: 600px; border: 5px solid green; display: flow-root; } </style></head><body> <div class="gege">gege</div> <div class="didi">1234</div></body></html>

這個功能可以用display:flex代替。

功能3：擋住margin

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS Bin</title> <style> .ba{ overflow:hidden; background: #000; } .er{ margin-top: 200px; height: 200px; background: #ddd; } </style></head><body> <div class="ba"> <div class="er"> </div> </div></body></html>

父元素為BFC

父元素不為BFC

可以通過border-top:1px代替。

推薦閱讀：

※你知道我們平時在CSS中寫的%都是相對於誰嗎？
※CSS
※前端開發該如何循序漸進地學習？對於html、css、js、jq等有哪些不錯的資料 （視頻，博客，書籍等）可以推薦？
※有哪些 Bootstrap 的學習案例？
※如何高效的載入scss文件？

TAG:CSS | 前端開發 |