BFC（Block Formatting Context）是Web前端开发中用于解决外边距折叠、包含浮动元素、防止文字环绕等问题的关键概念。通过创建BFC，可以避免外边距折叠，如将`overflow`设置为`hidden`；解决浮动元素导致的父元素高度坍塌；防止文字环绕浮动元素；以及在多列布局中避免最后一个盒子掉下去的情况。理解和应用BFC能有效提升前端布局的可控性。
目录
使用BFC解决在多列布局宽度超出盒子总宽度最后一个盒子会掉下去的问题
BFC叫格式化上下文。
我个人认为想要了解这个概念，先了解这个bfc可以解决什么问题？
-
使用BFC来防止外边距折叠
由下面的图我们可以看出，正常情况下，apple 和 banana 应该有 40px的距离，因为apple 有下边距20px + banana上边距20px = 40px，然而实际中浏览器显示的只有20px。这就是所谓的哇编剧折叠的问题。两个外边距相聚在一起的时候，以最大的外边距作为最终的两个盒子之间的距离。如果apple下边距是40px，banana上边距是20px，则他们之间的显示距离就为40px。
那么怎么解决这个问题呢？
<
最低0.47元/天 解锁文章
扫一扫
879
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
