本文转载自https://github.com/febobo/we B- interview/issues/99
一、什么？ 我们进行页面布局时，经常会发生以下情况。
这个元素的高度怎么没有了？ 这两列布局为什么不能适应？ 这两种元素的间隔为什么有点奇怪？ …原因是元素之间的相互影响，导致了意想不到的状况。 这里涉及到BFC的概念
块格式化上下文(bfc )是块级格式化上下文，是页面中的渲染区域，具有自己的渲染规则。
无论方向如何，内部框在同一BFC中的两个相邻框的边距都是重叠的。 每个元素的左边距与包含块的左边距相切。 即使是浮动元素，BFC的区域也不会与平坦的元素区域重叠，从而计算BFC的高度。 浮动子元素是页面上的独立容器，它参与计算，以防止容器中的子元素影响外部元素。 相反，BFC的目的是形成完全独立于外部的空间，从而防止内部子元素影响外部元素
二、触发条件触发BFC的条件包括以下内容：
根元素，即HTML元素浮动元素。 浮点值不是左值，灯光溢出值不是可见的，auto、scroll和隐藏显示的值是inline-block、inltable-cell和table-caption
通过margin防止style p { color: #f55重复； 后台： # FCC； width: 200px； line-height: 100px； 文本对齐3360中心； margin: 100px； }/stylebodypxhdxwz/PP hehe/p/body页面显示如下：
两个p元素之间的距离为100px，发生margin重叠(塌陷)，以最大为准，如果第一个p的margin为80，则两个p之间的距离还是100，以最大为准。
如上所述，同一BFC的两个相邻箱子的margin重叠
可以将容器包装在p之外，并触发此容器以生成BFC。 这样，两个p不属于同一BFC，不会发生margin重复
style .wrap { overflow: hidden； //新的BFC } p { color: #f55； 后台： # FCC； width: 200px； line-height: 100px； 文本对齐3360中心； margin: 100px； }/stylebodypxhdxwz/PDI vclass=' wrap ' p hehe/p/div/body此时不重叠边距：
内部浮动style.par { border :50 px固态# FCC； width: 300px； }.child { border :50 px solid # f66； width:100px； height: 100px； 浮点：左； }/stylebodydivclass=' par ' divclass=' child '/divdivclass=' child '/div/div/body页面显示如下：
另一方面，由于BFC在计算高度时还涉及浮动元素，因此如果可以触发. par元素的生活来计算BFC，则内部浮动元素在计算高度时也会进行计算
. par { overflow: hidden； }实现效果如下。
适应多列布局在此列举2列布局
样式主体{ width : 300 px； position: relative； } .aside { width: 100px； height: 150px； 浮点：左； 后台： # f66； } .main { height: 200px； 后台： # FCC； }/stylebodydivclass=' aside '/divdivclass=' main '/div/body效果图如下：
如上所述，每个元素的左外页边距与包含块的左边界相邻
因此，虽然. aslide是浮动元素，但main的左边仍然与包含块的左边接触
BFC的区域不与浮动箱重叠
因此，通过触发main生成BFC，可以对应于两级的布局
. main { overflow: hidden； }此时，新的BFC不与浮动的. aside元素重叠。 因此，根据包含的块的宽度和. aside的宽度，会自动变窄
效果如下。
上述几种情况总结表明，BFC实际上是页面的独立容器，内部子元素不影响外部元素
节约时间每天花3分钟学习，通过微信公众号【今日简讯】查看信息，技术升级时间已经足够了。 和朋友说话，还是少不了必要的话。
参考文献https://developer.Mozilla.org/zh-cn/docs/web/guide/CSS/block _ formatting _ context 3359 github.com/zuop HHE