大家好，我是今天的前端西瓜兄弟。
BFC是块格式上下文的缩写，中文翻译是块格式的上下文。
BFC是网页CSS渲染的一种机制，它是在块的布局中生成的区域。
您可以将BFC理解为容器，并且内部的元素不会影响容器外部的布局。
当然，有一些CSS属性也可以触发BFC，但相对较少。它没有在这里列出。读者可以自己阅读MDN文档。
目前，最常见的是通过在正常情况下构建BFC来构建BFC，其副作用是最少的。但是，如果元素中有内容以外的内容，它将被拦截，请谨慎使用它。
BFC有两个主要特征，让我们学习。
同一BFC下的两个邻居元素将在上下方向重叠。
例如，先前的DIV设置，下一个DIV设置，然后您会发现它们的上下距离实际上是20px（两者的最大值），而不是30px（两者的总和）。
如果您想避免这种情况，可以将这两个divs包装为BFC。
由于其副作用，在实际开发中，我更喜欢使用填充来替代边距。
浮动是一个非常奇怪的效果。效果类似于Word的文本，该文本可以被文本和内部连接样式包围。
当给出元素的浮动效果时，它将从正常文档流下掉落，向左或向右移动到容器的边框位置，或遇到另一个浮动元件。
浮动元件不超出正常文档流。通常，当计算容器元件的高度时，考虑浮动元件的高度。
但是BFC可以强行允许浮动元素参与计算。
上面提到的写作不会将BFC应用于容器，这将导致容器元件崩溃。效果显示在下图的左侧。
当我们删除注释时，容器元素用于应用BFC，我们可以根据子元素自动支持我们想要的容器元素的效果。效果显示在下图的右侧。
BFC主要掌握其两个特征：
我第一次在我的公共帐户中：前端西瓜兄弟
原始：https：//juejin.cn/post/7098356495875588132