解決高度塌陷、外邊距合併---BFC的概念

可能在初學前端的同窗，會有如下疑惑:   (沒錯,那同窗就是我)

一、爲何在浮動元素的父元素上添加overflow:hidden，能處理高度塌陷？

二、遇到外邊距合併，爲何要在父元素上添加overflow:hidden能解決？

首先來了解下------什麼是BFC吧！

一、按個人理解，BFC是一個大的隔離獨立盒子，擁有BFC特性的盒子、子元素不會影響盒子外面佈局，也就是說BFC特性能處理外邊距合併問題。

二、BFC特性會檢測子元素內部浮動、定位盒子的高度，也就是說把普通盒子加上BFC特性，能處理父元素不設置高度、浮動致使的高度塌陷問題。

那麼應該怎麼讓盒子擁有BFC特性呢？給盒子添加如下其一屬性：

• 浮動元素：float 除 none 之外的值
• 絕對定位元素：position (absolute、fixed)
• display ：inline-block、table-cells、flex
• overflow 除了 visible 之外的值 (hidden、auto、scroll)

-------------------------------------------------------------------------------------

這也就驗證了開始的問題。。原來BFC特性受益者是他的子元素啊，怪不得要把 overflow:hidden 加在父元素身上了！

碼字不易，點個贊再走唄！