【HTML/CSS】BFC

塊格式化上下文（Block formatting contexts）

BFC是什麼？

是Web頁面中盒模型佈局的CSS渲染模式。它的定位體系屬於常規文檔流。

至少知足條件之一：

• float 的值不爲 none
• position 的值不爲 static 或者 relative
• display 的值爲 table-cell , table-caption , inline-block , flex , 或者 inline-flex 中的其中一個
• overflow 的值不爲 visible

建立時可能會出現的問題：

• display:table 可能會產生一些問題
• overflow:scroll 可能會顯示沒必要要的滾動條
• float:left 將會把元素置於容器的左邊，其餘元素環繞着它
• overflow:hidden 將會剪切掉溢出的元素

BFC能夠用來作什麼？

兩個不一樣的BFC能夠防止正常margin外邊距摺疊

包含浮動：當容器內有元素浮動時，容器沒有設置高度，容器內的浮動子元素會脫離頁面文檔流；除了定義僞類clearfix還能夠設置BFC

防止圖片周圍文字環繞

多列布局中使用BFC：會在前一列填充完以後的後面佔據所剩餘的空間。

 原文：http://www.javashuo.com/article/p-xrqqqsyy-g.html