bfc（block formatting context，塊級格式上下文）是web頁面的視覺化css渲染的一部分，是塊盒子的布局過程發生的區域，也是浮動元素與其他元素互動的區域。
塊級格式化上下文對浮動定位與清除浮動都很重要。浮動定位和清除浮動時只會應用於同乙個bfc內的元素。浮動不會影響其它bfc元素的布局，而清除浮動只能清除同一bfc種在它前面的元素的浮動。外邊距摺疊（margin collapsing）也只會發生在屬於同一bfc的塊級元素之間 。
外邊距塌陷
從圖中可以看到，兩個之間的間距是100px，而不是100+100=200px，這就是外邊距摺疊/塌陷。
建立新的bfc避免兩個相鄰之間的外邊距合併問題。
高度塌陷
浮動的元素會脫離普通文件流，導致浮動元素的高度不參與父元素的高度計算，即常說的高度塌陷
從圖中可以看到，父元素的高度包含了上下邊框高度，而不包含浮動的子元素高度。想要浮動的子元素也參與到父元素的高度計算中，在父元素上建立乙個bfc即可。
元素與浮動元素重疊
class
="outer"
>
"box1"
>
div>
"box2"
>
我是乙個沒有設定浮動, 也沒有觸發 bfc 的元素。我是乙個沒有設定浮動,
也沒有觸發 bfc 的元素。我是乙個沒有設定浮動, 也沒有觸發 bfc 的元素。
從圖中可以看到，第二個元素與浮動元素重疊，但文字資訊不會被浮動元素覆蓋，產生了文字環繞的效果。如果想避免元素被覆蓋，可為第二個元素生成bfc。這種寫法適合「左文右圖」的布局
ps：參考自mdn
BFC 塊級格式上下文
url url 上文已經將的很詳細了，大家可以看看！這裡提另外乙個相關問題 url 我在這篇文章中找到了答案 問題是 有時候我們調子元素的margin top，是想和父元素拉開距離，可事實是和父元素沒拉開距離，反而是父元素與上面拉開了距離，感覺子元素的設定在父元素上起作用，為什麼呢？這是css2.1...
BFC塊級格式上下文
bfc是什麼 bfc block formatting context 塊級格式上下文，是乙個css的布局概念，是頁面視覺化css渲染的一部分，是塊盒子的布局過程發生的區域。bfc的觸發條件 1.浮動元素 元素的float不是none 2.絕對定位元素 元素的position為absolute或fl...
塊級格式化上下文（BFC）
最近遇到乙個專業的名詞，不是很懂，所以了解了一下，並總結歸納一下。首先清楚我們的問題是什麼？bfc是什麼？怎麼建立？什麼情況下建立？有什麼特性和作用？bfc 就是一種屬性，這種屬性會影響著元素的定位以及與其兄弟元素之間的相互作用。1，浮動元素，float 除 none 以外的值 2，絕對定位元素，p...