BFC是個什麽概念？
阿新 • • 發佈：2018-03-15
light gin AC 成了 清除 spa back 又是 標簽
在布局中一般就三種定位方式：普通流、浮動、絕對定位。
BFC，譯過來叫作“塊級格式化上下文”，聽起來賊高大上，它屬於普通流的一種。通俗一點來講，可以把 BFC 理解為一個封閉的大箱子，箱子內部的元素無論如何翻江倒海，都不會影響到外部的布局。
假如我在body裏面寫兩個div如下：
<body>
<div></div>
<div></div>
</body>
給他們都添加如下樣式：
width: 100px; height: 100px; background: lightblue; margin: 100px;
那麽，在同一個BFC（也就是body）下，它們會發生外邊距的合並，也就是說，兩個方塊的垂直距離為100px;所以如果你想避免這兩個盒子的樣式相互影響，把它們分別放在不同的容器就好了。把代碼改成這樣：
註意：這裏的div作為父級容器要設置其overflow：hidden來觸發BFC特性，如此一來，兩個p標簽的垂直高度就變成了200px。
我們都知道，如果父級容器不設置高度，而它包含的子元素又浮動，那就會使得父級容器的高度發生坍塌，變為0,這還是挺恐怖的。為了避免這個問題，又不想把高度寫死，可以設置父級容器的overflow：hidden來觸發自身的BFC特性，就好像開了個大招，因為BFC的特性中是會包裹浮動元素的，而BFC又是對外不影響的。所以在保住自身高度的同時也避免了自己子元素的浮動對外部造成影響，這就是父級容器設置overflow:hidden可以清除浮動的原理。
總結：給父級容器添加overflow：hidden，一鍵啟動其BFC特性，可以包裹自身的所有樣式，包括浮動、邊距等，免除對外界樣式的影響。
BFC是個什麽概念？