bfc簡述：bfc即 block formatting contexts (塊級格式化上下文)，是 w3c css2.1 規範中的乙個渲染規範，是頁面中的一塊渲染區域並且有自己獨有的渲染規則，決定了子元素的渲染位置以及和其他元素之間的關係和相互作用。
bfc規則：
同一bfc內的塊元素的上邊的邊距重疊
規定了包含元素的margin值和自己父容器的邊緣接觸
bfc的區域和以外的元素沒有任何影響
bfc的區域能夠解析浮動元素的高度
bfc可解決的問題：
相鄰元素上下邊距重疊
子元素的margin-top解析到自己身上
高度塌陷
實現自適應的兩欄布局
觸發bfc的條件：
overflow：不為visible
float：不為none
position：absolute或fixed
display：inline-block，table-cell，flex，inline-flex
注意：html標籤在瀏覽器中預設就是按bfc規則解析的
塊級格式化上下文（BFC）
最近遇到乙個專業的名詞，不是很懂，所以了解了一下，並總結歸納一下。首先清楚我們的問題是什麼？bfc是什麼？怎麼建立？什麼情況下建立？有什麼特性和作用？bfc 就是一種屬性，這種屬性會影響著元素的定位以及與其兄弟元素之間的相互作用。1，浮動元素，float 除 none 以外的值 2，絕對定位元素，p...
BFC塊級格式化上下文
塊格式化上下文 block formatting context，bfc 是web頁面的可視css渲染的一部分，是塊盒子的布局過程發生的區域，也是浮動元素與其他元素互動的區域。根元素 浮動元素 元素的 float 不是 none 絕對定位元素 元素的 position 為 absolute 或 fi...
BFC塊級格式化上下文
一 bfc理解 bfc block formatting context 塊級格式化上下文。我的理解就是他是乙個獨立的大箱子，箱子內屬於自己的一塊區域，與外界無關 二 如何觸發bfc？滿足下列任意乙個或多個條件即可 三 bfc布局規則 四 使用場景 解決margin重疊的問題 margin重疊，未使...