最近，我遇到了与BFC有关的问题。我意外地忘记了它。BFC应该属于著名的“八个共享文本”问题。
随着Flex和Grid布局的兴起，没有人会使用Float来实现多个列。使用浮子的机会几乎已经灭绝。感觉唯一的是输入框末端和标题栏的末端的×编号。
在通常的项目中，BFC基本上没有暴露。每当我看到这个概念时，我都必须在这里重新编写本文并巩固这一知识。
BFC，全名块格式上下文，这意味着阻止块的上下文。MDN上的定义是网页的Visual CSS渲染的一部分。
受欢迎的演讲：BFC是一个独立的容器。该容器的元素布局不受外部影响的影响，也不会影响外部布局。
这个概念非常圆，没有理解的价值。请记住，BFC通常用于处理这些问题。
查看以下示例，它将漂浮在孩子身上，导致其脱离文档流，而父元素崩溃。
通过设置容器，它变成BFC，在计算高度以解决高度塌陷时，它包含内部浮动元件。
html
CSS
两个级别元素之间的上边界和外边界可以合并为外部距离。该值将使一个价值很大。这种行为折叠了外部距离。重叠只会出现在垂直方向上。
通过设置容器，它变成BFC，它不会与其他外部元素相互影响，并解决了外侧的重叠。
html
CSS
浮动元素将与文档流分开，导致另一个元素使另一个元素变成BFC，而浮动元素不会彼此影响。
html
CSS
以上是通常用BFC处理的三个问题。
通常有一个BFC
备注：flex/网格容器（：flex/grid/inline-flex/inline-grid）设置了新的flex/网格格式上下文，除了布局外，它与bfc相似。/网格容器，但是排除外部浮动并防止外部距离重叠的重叠仍然有效。
如果文章中有错误或严格的位置，请正确，非常感谢。
如果您喜欢或启发，请喜欢注意并鼓励新作者。
原始：https：//juejin.cn/post/7097147699254231047