首先回顧一下普通流，普通流對後面進一步瞭解BFC有很大的作用
普通流（Normal Flow）
普通流是網頁中元素的默認排版，默認情況下
塊級元素：以block flow direction排列（每一個塊級元素新起一行，即以從上往下以列排列）
行內元素：不會另起一行，一個接一個排布，直到空間不足
脫離普通流
CSS有以下幾種方法使元素脫離普通流
float
float能夠使元素向某一方向偏移，直接看demo
<div style="background-color: pink; opacity: 0.5; height: 100px;width: 100px; float: left">
粉色透明div向左float
</div>
<div style="background-color: lightblue; width: 400px; height: 400px;">
<div style="background-color: yellow; width: 50px; height: 50px;">本該在黃色div中的文字
環繞粉色div
</div>
普通流淺藍色DIV，與粉色div爲兄弟元素，且包含黃色子div
</div>
爲方便看出浮動元素脫離普通流遮蓋效果，我給粉色div加了透明度，可以直接看出其覆蓋了藍色div中的黃色div，同時因爲文字會環繞浮動div，故黃色div的文字置於了粉色div下方
（float的本來用處是爲了實現文字環繞）
absolute與fixed
這兩種情況相對浮動更易於理解，自己動手實驗就好啦
display:none
會使dom節點不在渲染樹中，不再有分配空間
BFC
簡介
先看下FC，即Formatting Context（格式化上下文），是W3C CSS2.1中的一個概念，指頁面的一塊渲染區域，有對應的渲染規則（BFC與IFC），決定子元素如何定位，及和其他元素之間的關係和相互影響
而BFC即Block Formatting Contexts，觸發BFC特性的元素會有以下影響（我翻譯水平較低，內容來自W3C BFC）：
- 一個BFC下，block子元素會垂直排列，且垂直方向上會發生margin合併
- BFC中的元素的左外邊緣會touch到BFC容器的左邊緣（右邊同理，這個元素同時包括浮動元素）
結合上述兩點，各個blog上有這樣的總結：
BFC元素特性表現原則就是，內部子元素再怎麼翻江倒海，翻雲覆雨都不會影響外部的元素。所以，避免margin穿透啊，清除浮動什麼的也好理解了。（摘自[張鑫旭blog](https://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/)）什麼情況下會觸發BFC呢，主要有以下幾種情況
- 根元素，即HTML標籤
- 浮動元素：float值爲left、right
- overflow值不爲 visible，爲 auto、scroll、hidden
- display值爲 inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
- 定位元素：position值爲 absolute、fixed
tips：
W3C文檔描述：Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that
are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the
viewport) establish new block formatting contexts for their contents.應用
BFC有很多方面應用，瞭解BFC特點後，很多操作也知道原理了
避免margin合併(margin collapse)
同一個BFC下：
<div style="width: 100px;height: 100px;background-color: pink; margin: 20px;" > </div>
<div style="width: 100px;height: 100px;background-color: pink; margin: 20px;" > </div>
可見margin發生合併
不同BFC下：
<div style="overflow: hidden;">
<div style="width: 100px;height: 100px;background-color: pink; margin: 20px;" > </div>
</div>
<div style="overflow: hidden;">
<div style="width: 100px;height: 100px;background-color: pink; margin: 20px;" > </div>
</div>
margin不合並
包含浮動元素（清除浮動）
這只是清除浮動的一種方式而已，而且也有一些侷限性，但做個例子說明BFC的應用
未清除浮動：
<div style="border: 1px solid black;">
<div style="float: left;width: 100px;height: 100px;background-color: pink;" ></div>
</div>
觸發BFC清除浮動：
<div style="border: 1px solid black;overflow: hidden;">
<div style="float: left;width: 100px;height: 100px;background-color: pink;" ></div>
</div>
題外小聲逼逼：使用浮動需謹慎
去除覆蓋效果
<div style="background-color: pink; opacity: 0.5; height: 100px;width: 100px; float: left">
粉色透明div向左float
</div>
<div style="background-color: lightblue; width: 400px; height: 400px;">
普通流淺藍色DIV，與粉色div爲兄弟元素;普通流淺藍色DIV，與粉色div爲兄弟元素;普通流淺藍色DIV，與
粉色div爲兄弟元素;普通流淺藍色DIV，與粉色 div爲兄弟元素;普通流淺藍色DIV，與粉色div爲兄弟元素;
普通流淺藍色DIV，與粉色div爲兄弟元素;
</div>顯示如下
但是觸發淺藍色的div之後
overflow: hidden;
此時文字信息爲匿名塊框,所以原理還是BFC的第二個特點：BFC中的元素的左外邊緣會touch到BFC容器的左邊緣（右邊同理，這個元素同時包括浮動元素）
自適應佈局
結合上述的去除覆蓋效果與div默認的width:auto可以實現自適應佈局，但是也有很多侷限性，比如overflow:hidden很多場景不適合使用等等
小聲逼逼：flex！
總結
知道原理可以讓人少犯某些頁面的佈局錯誤
內容有不妥之處請大佬指出
小聲逼逼：float使用需謹慎！
參考資料
Normal Flow——MDN
CSS深入理解流體特性和BFC特性下多欄自適應佈局
W3C BFC
10 分鐘理解 BFC 原理
CSS 匿名文本和匿名框