什麼是bfc？
全稱塊級格式化上下文？什麼意思不懂。看了好多部落格，基本都是抄的，真心都不是大白話。我今天來總結一下，用菜鳥級別的語言來描述。
bfc 應該可以抽象成乙個 獨立的個體，出淤泥而不染的白蓮花。
是的不受其他元素的影響，始終保持自己獨立。就是正常的普通流布局規則，設定的樣式是什麼樣的，就按正常的普通流布局的表現。
內部的子元素 不受外界的影響，外界的元素，也不受內部的元素的影響。各自獨立生活在html這片空間下。
bfc觸發條件：
根元素，即html元素
float的值不為none
overflow的值不為visible
display的值為inline-block、table-cell、table-caption
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還是要好好理解理解的，之前都是瞎幾把布局。雖然效果也能出來，但是寫了很多不必要的**吧。
什麼是BFC規則？
block formatting context 塊級格式化上下文 塊級元素的渲染區域規則 bfc盒子 外部不影響內部 內部不影響外部 1.float不為none 2.position屬性為absolute和fixed 3.oveflow不為visiable 4.html 根標籤1.bfc盒子內部的...
什麼是前端？
什麼是前端？1 任何能夠直接跟使用者打交道的互動介面都可以稱之為前端，有前必有後，後端就是我們以前學的服務端。所謂python全棧開發，就是前端與後端都寫。而說到前端後端就得提到 軟體開發架構 c s架構 client server b s架構 browser server 本質上b s架構也是c ...
CSS8 到底什麼是BFC？
現在有flex布局等新技術，bfc的效果比如包住元素，進行自適應布局等已經不需要了。現在只有免式的事後才需要知道bfc！9.4.1 塊格式化上下文 浮動，絕對定位元素，非塊盒的塊容器 例如，inline blocks，table cells和table captions 和 overflow 不為 ...