回想第一次聽到bfc的時候，是在解釋為什麼高度塌陷可以用overflow:hidden;等方法來解決的時候，當時bfc對我來說還是乙個陌生的概念。在解決高度塌陷的問題的時候，通過bfc的觸發條件之一觸發bfc後，在計算bfc的高度的時候，浮動元素就可以參與計算了。
bfc(block formatting contexts)即塊級格式化上下文，首先得是塊元素，其次具備觸發條件之一的才可以是bfc。得知怎麼能觸發bfc之後，就來到了我今天要說的觸發bfc之後，利用bfc的其中乙個特性可以實現自適應兩欄布局。bfc的這個特性是，bfc的區域不會與浮動元素發生重疊。這個特性也可以解釋為什麼多個元素浮動之後會橫著排。bfc的觸發條件可以是
根元素；html標籤本身就是乙個bfc
float的值不為none
overflow的值不為visible
display的值為inline-block/table-cell/table-caption/flex/inline-flex
position的值為absolute或fixed
當上面的乙個元素浮動，下面的乙個元素沒有浮動的時候，會發生重疊，原因是浮動之後不佔據位置，所以下面的元素會上去。
當給下面的元素新增了float/overflow/display的時候（參照上面的bfc觸發條件），就不會重疊了。原因也就是觸發了下面的元素為bfc，而bfc的特性就有bfc區域不會與浮動盒子發生重疊。
如果既要bfc的區域不會與浮動盒子發生重疊，又要右邊的容器自適應，我們把這稱為自適應兩欄布局。自適應兩欄布局也通常用來實現後台管理系統。下面用例項進行說明：
首先，我們試一下給右邊元素加float，可以看見，float只能解決重疊問題，不能達到自適應的效果。
其次，我們給右邊的元素加overflow:hidden/auto/scroll; ,可以達到自適應的效果
按照上述方法，再給元素新增display:flex/inline-flex，也可以達到自適應的效果。
總結：既可以讓bfc區域不會與float box重疊，又要右邊的容器自適應，可以給右邊元素新增（1）overflow:hidden/auto/scroll;（2）display:flex/inline-flex;擴充套件：自適應兩欄布局也通常用來實現後台管理系統。（核心：自適應兩欄）
以上為簡易的後台管理系統兩欄自適應布局（為布局清晰，大多使用色塊搭建）
自適應三欄布局BFC屬性
1 自身浮動 2 雙飛翼 3 絕對定位三種都是通過設定margin值和定位屬性實現自適應三欄。這樣一旦左右兩側欄目寬度變化，就要更改margin的值，十分麻煩。但是在張鑫旭老師的 css世界 中提到一種方法，利用bfc屬性，隨意改變左右兩側的寬度，不需要改變其他值也能實現自適應三欄。具體原因可以參考...
BFC 自適應布局
bfc全稱為block formatting context，塊級上下文結構，具有bfc結構的元素的內部元素不會影響外部元素的布局和結構。bfc可以由以下幾種方式觸發 根元素float不為none overflow不為visible position除relative和static display的...
css實現兩欄自適應布局
前端經典的兩欄布局 1 左側定寬，左浮動 右側寬度100 doctype html 兩欄布局 左側定寬左浮動，右側寬度100 left right 2 使用彈性布局，父元素display flex，左側定寬，右側flex 1，佔滿容器寬度 body left right 3 父元素相對定位，左側定寬...