哈嘍，各位小夥伴好！今天來整理下前端關於css布局的乙個知識點 - bfc(block fomatting context)，如果知識點梳理有出錯的地方，望夥伴們幫忙指出，一起進步~
bfc 可以理解為建立乙個布局容器，容器裡按自己的方式來布局，且與容器外界的元素互不影響。
"wrap">
"fl">
"div">這是div - 1
"div">這是div - 2
產生乙個 bfc 容器產生乙個 bfc 容器產生乙個 bfc 容器產生乙個 bfc 容器產生乙個 bfc 容器產生乙個 bfc 容器產生乙個 bfc 容器
複製**
如圖所示，這樣我們就通過float 來使得 .fl 元素生成乙個 bfc 容器，也可以看到：
1.容器裡的div元素也是垂直排列。（對應上面介紹的特性1 - bfc裡的布局跟常規流裡的一樣，例如盒子會在垂直方向排列）。
2.容器裡的 div 元素只會撐滿整個bfc容器，並不會對容器外產生影響。（對應上面介紹的特性5 - bfc內的元素不會影響到外部的元素。）
"p1">這是文字1111111111111111
"p2">這是文字2222222222222222
複製**
從圖中可以看到 .p2 的margin-top和 .p1 的margin-bottom 重疊在一起了，使得他們中間的間距只有10px而不是20px。（對應上面介紹的特性2 - 屬於同乙個bfc裡的盒子會產生margin重疊）。 因為跟元素本身也是乙個bfc。 解決方法是，建立乙個bfc容器：（乙個元素只能受乙個bfc容器影響，當元素自己也成為bfc時，就不收根元素影響了）
"p1">這是文字1111111111111111
"wrap">
"p2">這是文字2222222222222222
複製**
"wrap">
"fl">左邊
"main">主體內容主體內容主體內容主體內容主體內容主體內容
複製**
當有子元素浮動時，父元素在計算高度時沒有把浮動元素的高度算進去，所以看到了 .fl 元素超出了父元素。將父元素設成bfc可解決這個問題（對應上面介紹的特性6 - bfc容器計算高度時，內部float元素也參與）
"wrap">
"fl">高度為100px的浮動元素
"con">這是文字這是文字這是文字這是文字這是文字
複製**
以上就是我整理的一些關於bfc的知識點和一些應用。
前端BFC布局學習
bfc，全稱為 block formatting context 按照我的理解是我們在某一條件下會觸發bfc布局，會產生一定的效果。block formatting contexts翻譯為 塊級元素格式化上下文。它決定了塊級元素如何對它的內容進行布局，以及與其他元素的關係和相互作用。其中塊級元素可以...
CSS布局之BFC和IFC
這是一篇css2 3的布局規則0.000001覽 bfc block formatting context 塊級格式上下文 塊級元素 block level elements display block list item table flex 塊級盒 block level boxes 塊級盒是指...
CSS布局基礎BFC
bfc是什麼？第一次看到這個名詞，我是拒絕的，css什麼時候還有這個東西？於是迫不及待的google了一下，才發現原來它無時無刻不在我們的css當中，只不過它並不是乙個屬性，不需要我們平常使用手寫罷了。但是它的重要性確是槓槓的，可以這麼說，沒有它就就沒有什麼css布局 bfc,全稱 block fo...