什么是BFC？
全稱塊級格式化上下文？什么意思不懂。看了好多博客，基本都是抄的，真心都不是大白話。我今天來總結一下，用菜鳥級別的語言來描述。
BFC 應該可以抽象成一個 獨立的個體，出淤泥而不染的白蓮花。
是的不受其他元素的影響，始終保持自己獨立。就是正常的普通流布局規則，設置的樣式是什么樣的，就按正常的普通流布局的表現。
內部的子元素 不受外界的影響，外界的元素，也不受內部的元素的影響。各自獨立生活在html這片空間下。
BFC觸發條件：
【1】根元素，即HTML元素
【2】float的值不為none
【3】overflow的值不為visible
【4】display的值為inline-block、table-cell、table-caption
【5】position的值為absolute或fixed
BFC布局規則：
1.內部的Box會在垂直方向，一個接一個地放置（不設置浮動，設置浮動那肯定是 左右一行排列了）。
2.Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊（正常的不設置浮動，兩個塊元素margin重疊,僅僅是垂直方向，左右不是這個樣子的）
3.每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。（不設置浮動，不設置左邊距，塊級子元素，一律靠左豎直向下排列，內聯子元素一律從左向右排列，想想，正常寫代碼，都是這樣，設置左浮動的靠近父元素的左邊，設置右浮動，靠近父元素的右邊。）
4.BFC的區域不會與float box重疊。BFC區域的子元素不受外面的影響，外面的也不受BFC區域里面的影響（這個挺重要的，設置的浮動的元素，脫離了文檔流，正常的相鄰的元素會跑到它下面（靠左）。設置成BFC，自己獨成一塊，不會跑到它下面，而是保持潔身自好，自己依然占一塊。）
6.計算BFC的高度時，浮動元素也參與計算（就是子元素設置浮動，脫離文檔流，父元素高度塌陷，給父元素設置BFC，那么父元素高度就不會忽略浮動的子元素，從而高度就不會塌陷，這樣理解，好像是BFC又把脫離文檔流的元素，又拉回來了，但保持了浮動的特點。）
作用：？？？
哎呀，成天寫頁面，其實經常用到，但是可能不知道這個就是BFC的知識。
比如：
兩欄布局、清除浮動用overflow：hidden；等說實話，布局，有很多辦法，但是，清除這些東西，能更好的來寫DOM和CSS還是要好好理解理解的，之前都是瞎幾把布局。雖然效果也能出來，但是寫了很多不必要的代碼吧。
---------------------
作者：木心Do
來源：CSDN
原文：https://blog.csdn.net/qq_33505829/article/details/88833449
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！