初次接觸BFC概念是在學浮動的時候，網課老師說啊：“浮動元素產生了浮動流，只有產生了BFC的元素，和文本類屬性的元素及文本才能看到它”。到此我就產生了疑問，帶着疑問的我呢，繼續聽完了那節網課也沒搞懂什麼叫BFC，隨着網課的聽完，我也就將它拋諸腦後了。
今天呢，想起這個問題，也就順手百度學習了一下。
BFC 全稱爲 塊格式化上下文 (Block Formatting Context) 。
那麼BFC有什麼作用呢？僅僅是能看到浮動元素嗎？
1.用來解決垂直方向margin合併問題
塊級標籤之間豎直方向的margin會以大的爲準，這就是margin的塌陷現象，如圖所示。
解決方案：爲灰色方塊添加父級，爲父級添加BFC，添加後效果：
2.因爲BFC可以看到浮動元素，因此可以被用作解決兄弟間因浮動產生的覆蓋問題
解決方案：爲綠色添加BFC，添加後效果
3.解決高度塌陷問題，在通常情況下父元素的高度會被子元素撐開，而在這裏因爲其子元素爲浮動元素所以父元素髮生了高度坍塌，上下邊界重合。這時就可以用bfc來清除浮動了。
解決方案：爲父級元素添加BFC，添加後效果
那怎麼產生BFC呢？
1.float屬性不爲默認值
2.overflow不爲visible
3.display不爲block或inline
4.position不爲static或relative
總結：BFC（塊級格式化上下文）能解決“margin塌陷問題 ”，“高度塌陷問題”，“因浮動產生的覆蓋問題”。