bfc 全稱為 block formatting context，中文為「塊級格式化上下文」。
「結界」這個詞大家應該都理解的，指通過一些特定的手段形成的封閉空間，裡
面的人出不去，外面的人進不來，具有極強的防禦力。bfc 的特性表現如出一轍。
大家請記住下面這個表現原則：如果乙個元素具有 bfc，內部子元素再怎麼翻江倒海、翻
雲覆雨，都不會影響外部的元素。所以，bfc 元素是不可能發生 margin 重疊的，因為 margin
重疊是會影響外面的元素的；
bfc 元素也可以用來清除浮動的影響，因為如果不清除，子元素
浮動則父元素高度塌陷，必然會影響後面元素布局和定位，這顯然有違 bfc 元素的子元素不會
影響外部元素的設定。
那什麼時候會觸發 bfc 呢？常見的情況如下：
• 根元素；
• float 的值不為 none；
• overflow 的值為 auto、scroll 或 hidden；
• display 的值為 table-cell、table-caption 和 inline-block 中的任何乙個；
• position 的值不為 relative 和 static。
換言之，只要元素符合上面任意乙個條件，就無須使用 clear:both 屬性去清除浮動的
影響了。因此，不要見到乙個元素就加個類似.clearfix 的類名，否則只能暴露你孱
弱的 css 基本功。
CSS中的BFC解析
bfc 即塊級格式上下文 block formatting context 它是指乙個獨立的塊級渲染區域，只有block level的box參與，該區域擁有一套渲染規則來約束塊級盒子的布局，且與區域外部無關。css2.1規定滿足一下條件之一就會生成bfc 根元素float的值不為none overf...
CSS中的BFC詳解
一 何為bfc bfc block formatting context 格式化上下文，是web頁面中盒模型布局的css渲染模式，指乙個獨立的渲染區域或者說是乙個隔離的獨立容器。二 形成bfc的條件 1 浮動元素 float除none以外的值。2 定位元素 position absoluted,fi...
CSS中的BFC詳解
引言 一 何為bfc bfc block formatting context 格式化上下文，是web頁面中盒模型布局的css渲染模式，指乙個獨立的渲染區域或者說是乙個隔離的獨立容器。二 形成bfc的條件 1 浮動元素，float 除 none 以外的值 2 定位元素，position absolu...