BFC vs 普通div布局
时间：2023-08-30 00:48:01 | 来源：网站运营
时间：2023-08-30 00:48:01 来源：网站运营
BFC vs 普通div布局：css中常说的BFC是Block Formatting Context的缩写，其实就是创造出一个特殊的box，这个box中的渲染、布局规则跟普通div有些不同，今天我们就来聊一下BFC有什么特殊的地方。
一、避免div塌陷
先说说啥是div塌陷，正常父级div的高度只计算子级div的内容、padding和border，不会计算margin-top和margin-bottom，而且不计算float块级元素，这就造成了div塌陷问题。而BFC高度计算则包含margin-top和bottom，并且包含float元素。
margin塌陷下图，绿色代表父级div，可以看到，由于普通父级div的高度不会包含子div的margin，所以造成了上下塌陷，父级div只包含了1、2、3的border以内的部分，并没有将margin包含进去，造成了子级div的外溢，这在布局时是非常麻烦的：
而反观BFC，父级div的高度将margin都计算进去，父级div将子级div完全包含进去，布局时就可以完全通过margin来控制上下元素的距离。
float塌陷由于普通div的高度是不包含float元素的，所以也会造成塌陷：
而如果父级div是BFC，那么计算高度时会仍然会包含float元素，避免塌陷：
二、margin叠加
普通div和div之间，上下margin是重叠的。啥叫重叠呢？上下两个div的margin，如果都是10px，他们的上下距离不是20px，而是10px，因为margin重叠了。如果一个是10px，两一个是20px，那么距离是20px，而不是30px，因为10px和20px有重叠的部分。注意，现在说的是两个兄弟div直接的margin关系，不是父子div。
上图所示，我命名设置了上下margin都是100，但1和2的实际距离只有100px，而不是200，就因为他们margin重叠了。看好，是重叠不是叠加。
如果是BFC，margin是叠加的，而不是重叠。什么意思？两个div的margin都是100px，他们的上下距离就是200px—叠加。
三、不会被float覆盖
普通div遇到float元素，会被覆盖：
BFC则会顶着float元素边缘，不会被覆盖：
利用这个特性，我们就可以实现“左右布局”和“圣杯布局”：
左右两个div分布float靠左和靠右，中间div是BFC，可以随着界面宽度进行伸缩。
综上，BFC的特性其实就3个：
1、避免div塌陷
2、margin叠加
3、避免float覆盖
特别是第3点，是css布局中常用的手段，因此，BFC是网页布局中比较舒适的布局方案。
在线咨询
