完整高频题库仓库地址：https://github.com/hzfe/aweso...完整高频题库阅读地址：https://hzfe.github.io/awesom...相关问题BFC有什么用，如何触发？谈谈你对BFC的理解。AnswerKeypointsBoxmodel视觉格式化模型包含块正常流什么是BFCBFC的全称是blockformattingcontext，中文是“块级格式化上下文”。它是一个只有块级盒子参与的独立块级渲染区域，它规定了内部块级盒子如何布局，与区域外部无关。BFC修复浮动元素导致的高度塌陷问题有什么用。避免不希望的边缘崩溃。实施灵活而强大的自适应布局。触发BFC根元素的常见条件。float的值不是没有。位置的值不是相对的或静态的。overflow的值是不可见的或剪辑的（根元素除外）。display的值为table-cell、table-caption、inline-block中的任意一个。display的值为flow-root、flow-root或list-item。flex项，即显示值为flex或inline-flex的元素的直接子元素（子元素显示不是flex、grid、table）。griditems，即显示值为grid或inline-grid的元素的直接子元素（子元素的显示不是flex、grid、table）。contain的值为layout、content、paint或strict中的任意一个。column-span设置为all的元素。Tips：display:flow-root、contain:layout等没有副作用，可以在不影响已有布局的情况下触发BFC。知识点深入1.前置知识点盒模型（boxmodel）盒模型描述了一个由元素生成的矩形框，视觉格式化模型决定了这些框的大小、位置和属性（如颜色、背景、边框大小等）。盒子的具体组成如下图所示：术语分析由于视觉格式化模型的描述中有很多相似的术语，这里先列出解释。box：占据画布空间的抽象概念，通常由元素生成。一个元素可能会生成多个框（例如伪元素、列表项元素）。principalbox：在一个元素生成的多个box中，用来包含它的后代box和它生成的内容的box，也是参与任何定位方案的box。块级框（block-levelbox）：参与BFC布局的框，通常由块级元素生成。块容器box（blockcontainer）：在CSS2.2中，除了标签框或被替换??元素的主框外，块级框也是块级容器，但并不是所有的块级容器都是块级框（例如不可替换的内联块Box）。块容器主要关注其子元素的定位和布局。块盒（blockbox）：如果一个块级盒也是一个块容器，则可以称为块盒。block：块盒、块级盒或块容器盒的简写，当没有歧义时。（注：盒子有“块级盒子”和“块级盒子”，元素只有“块级元素”，没有“块级元素”）2.视觉格式化模型（visualformattingmodel）视觉格式化模型描述了用户代理在视觉媒体（如显示器）上操作文档树的过程（如浏览器）。以下小节与视觉格式化模型中的BFC描述密切相关：2.1包含块（containingblock）在大多数情况下，包含块是由元素最近的祖先块容器的内容区域（contentarea）确定的矩形区域，包含块本身不是一个盒子，而是一个矩形区域。元素的大小、位置和偏移量等布局信息是根据包含块的大小计算的。2.2正常流（normalflow）正常流是浏览器的默认布局。属于BFC、IFC或其他格式化上下文之一的正常流中的框。2.3格式化上下文（formattingcontext）格式化上下文是一系列相关框被布局的环境。不同的格式化上下文有不同的布局规则。目前常见的格式化上下文有：块格式化上下文（BFC，blockformattingcontext）。行内格式化上下文（IFC，inlineformattingcontext）。弹性格式化上下文（FFC，flexformattingcontext），在CSS3中定义。网格格式上下文（GFC，gridformattingcontext），在CSS3中定义。2.4独立格式化上下文（independentformattingcontext）一个框要么建立一个新的独立格式化上下文，要么延续其包含块的格式化上下文。除非另有说明，否则创建新的格式化上下文就是创建一个独立的格式化上下文。当一个框建立一个独立的格式化上下文时，它会创建一个新的独立布局环境。框内的后代不会影响格式化上下文之外的规则和内容，反之亦然，除非更改框本身的大小。2.5块级格式化上下文规范及分析根据W3CCSS2.1VisualFormattingModel一章中的定义，BFC相关规范描述如下：浮动元素、绝对定位元素、非块级的块级容器-级框（如inline-block、table-cells、table-captions）和溢出值不可见的块级框会为其内容创建BFC（注意：触发BFC的条件）。在BFC中，盒子从包含块的顶部开始一个接一个地垂直排列。相邻框之间的垂直间隙由它们的边距值决定。在同一个BFC中，相邻块级框的垂直外边距会合并（注意：所有参与BFC布局的元素都是块级元素）。在BFC中，每个框的左外边缘（margin-left）接触包含块的左边缘。即使有浮动元素也是如此，除非盒子建立了一个新的BFC。结合规范的第三点和独立格式化上下文的知识，我们可以有如下推论：BFC内外互不影响。BFCcontainsinternalfloats（解决内部浮动元素引起的高度塌陷）。BFC排除外层浮点数（触发BFC的元素不与外层浮点数重叠）。保证金崩溃计算不能跨越BFC边界。已经创建BFC的兄弟元素互不影响（注意：在水平方向上，多个浮动元素加上触发BFC的一个或零个元素可以组成多列布局）。通过BFC可以实现灵活健壮的自适应布局，一行实现类似flexbox的效果。示例如下：两列自适应布局多列自适应布局参考资料块级格式化上下文包含块：MDN包含块：W3C视觉格式格式化模型：MDN视觉格式化模型：W3C盒模型：MDN盒模型：W3C
