html文件中元素的定位有3種方式(普通流、絕對定位、浮動)，除普通流以外，浮動與絕對定位都會導致元素脫離普通流，按照各自的方式進行定位。
帶有bfc屬性的容器屬於普通流的一種。
塊格式化上下文是頁面 css 視覺渲染的一部分。它是用於決定塊盒子的布局及浮動相互影響範圍的乙個區域。
bfc是元素在擁有某些特定屬性才顯示的一種屬性，有bfc特性的元素和其他普通流中的元素在樣式上沒有區別。但在功能上，具有bfc的容器內部與外部隔離，即容器內部的元素不會再布局上影響外部元素。
有bfc屬性的容器可以包含浮動元素、會阻止外邊距摺疊、可以阻止元素被浮動元素覆蓋。
滿足下面任意乙個條件的元素會觸發bfc:
以上是 mdn 上引發bfc屬性的條件。需要注意的是，」display:table」 本身並不產生 bfc，而是由它產生匿名框，匿名框中包含 「display:table-cell」 的框會產 bfc。 總之，對於 「display:table」 的元素，產生 bfc 的是匿名框而不是 「display:table」。
通常，浮動的元素會脫離普通流，不僅會影響兄弟元素，也會影響父容器以及父容器兄弟元素。對於父容器，最直觀的就是會使父容器高度塌陷
給父容器新增overflow:hidden屬性，使其引起bfc屬性.
兩個相連的 div 在垂直上的外邊距會發生疊加。
詳細的解釋：僅當兩個塊級元素相鄰並且在同乙個塊級格式化上下文時，它們垂直方向之間的外邊距才會疊加。也就是說，即便兩個塊級元素相鄰，但當它們不在同乙個塊級格式化上下文時它們的邊距也不會摺疊。因此，阻止外邊距摺疊只需產生新的 bfc 。
這裡父容器的上下設定了20px的外邊距，而p元素有1em的上下外邊距。可以看到第乙個p元素與父容器頂部沒有間距，兩者外邊距產生重疊。
父容器新增overflow:hidden屬性，使其引起bfc屬性.這裡僅第乙個p元素與父容器的外邊距未摺疊，p元素之間外邊距摺疊。
將中間的p元素用乙個div包裹，並新增overflow:hidden屬性，使其引起bfc屬性.
上面說過，浮動元素會對兄弟元素造成影響。若兄弟元素是塊級元素，則會與浮動元素重疊，位於浮動元素之下。若為內聯元素，則依次從左至右排列。
但是若子元素display:inline-block，則子元素寬度之和大於父容器寬度，則最後寬度相加超過父容器寬度的子元素換行顯示。
通常我們清除浮動，方法有幾種：
由於早期ie6、7對於不支援bfc,所以需要通過iehack解決。在ie6、7中，通過觸發haslayout私有屬性實現bfc效果。從使用上看，haslayout私有屬性和bfc觸發方式都是通過特有屬性觸發，ie6、7中大多通過設定zoom:1;觸發，zoom用於設定或檢索元素縮放比例，值1表示元素實際尺寸，所以設定1不會對元素顯示造成影響。
塊級格式化上下文（BFC）
最近遇到乙個專業的名詞，不是很懂，所以了解了一下，並總結歸納一下。首先清楚我們的問題是什麼？bfc是什麼？怎麼建立？什麼情況下建立？有什麼特性和作用？bfc 就是一種屬性，這種屬性會影響著元素的定位以及與其兄弟元素之間的相互作用。1，浮動元素，float 除 none 以外的值 2，絕對定位元素，p...
BFC 塊級格式化上下文
bfc簡述 bfc即 block formatting contexts 塊級格式化上下文 是 w3c css2.1 規範中的乙個渲染規範，是頁面中的一塊渲染區域並且有自己獨有的渲染規則，決定了子元素的渲染位置以及和其他元素之間的關係和相互作用。bfc規則 同一bfc內的塊元素的上邊的邊距重疊 規定...
BFC塊級格式化上下文
塊格式化上下文 block formatting context，bfc 是web頁面的可視css渲染的一部分，是塊盒子的布局過程發生的區域，也是浮動元素與其他元素互動的區域。根元素 浮動元素 元素的 float 不是 none 絕對定位元素 元素的 position 為 absolute 或 fi...