BFC vs 普通div布局

時間：2023-08-30 00:48:01 | 來源：網(wǎng)站運營

時間：2023-08-30 00:48:01 來源：網(wǎng)站運營

BFC vs 普通div布局：css中常說的BFC是Block Formatting Context的縮寫，其實就是創(chuàng)造出一個特殊的box，這個box中的渲染、布局規(guī)則跟普通div有些不同，今天我們就來聊一下BFC有什么特殊的地方。

一、避免div塌陷

先說說啥是div塌陷，正常父級div的高度只計算子級div的內(nèi)容、padding和border，不會計算margin-top和margin-bottom，而且不計算float塊級元素，這就造成了div塌陷問題。而BFC高度計算則包含margin-top和bottom，并且包含float元素。

margin塌陷

下圖，綠色代表父級div，可以看到，由于普通父級div的高度不會包含子div的margin，所以造成了上下塌陷，父級div只包含了1、2、3的border以內(nèi)的部分，并沒有將margin包含進(jìn)去，造成了子級div的外溢，這在布局時是非常麻煩的：

而反觀BFC，父級div的高度將margin都計算進(jìn)去，父級div將子級div完全包含進(jìn)去，布局時就可以完全通過margin來控制上下元素的距離。

float塌陷

由于普通div的高度是不包含float元素的，所以也會造成塌陷：

而如果父級div是BFC，那么計算高度時會仍然會包含float元素，避免塌陷：

二、margin疊加

普通div和div之間，上下margin是重疊的。啥叫重疊呢？上下兩個div的margin，如果都是10px，他們的上下距離不是20px，而是10px，因為margin重疊了。如果一個是10px，兩一個是20px，那么距離是20px，而不是30px，因為10px和20px有重疊的部分。注意，現(xiàn)在說的是兩個兄弟div直接的margin關(guān)系，不是父子div。

上圖所示，我命名設(shè)置了上下margin都是100，但1和2的實際距離只有100px，而不是200，就因為他們margin重疊了。看好，是重疊不是疊加。

如果是BFC，margin是疊加的，而不是重疊。什么意思？兩個div的margin都是100px，他們的上下距離就是200px—疊加。

三、不會被float覆蓋

普通div遇到float元素，會被覆蓋：

BFC則會頂著float元素邊緣，不會被覆蓋：

利用這個特性，我們就可以實現(xiàn)“左右布局”和“圣杯布局”：

左右兩個div分布float靠左和靠右，中間div是BFC，可以隨著界面寬度進(jìn)行伸縮。

綜上，BFC的特性其實就3個：

1、避免div塌陷

2、margin疊加

3、避免float覆蓋

特別是第3點，是css布局中常用的手段，因此，BFC是網(wǎng)頁布局中比較舒適的布局方案。