虽然我工作了这么多年，但是如果直接解释BFC是什么，对于如何准确表达，我还是感到有些迷茫。下面我们通过文档，总结一下，加深一下理解。大家也可以关注我的GitHub后续的更新1.BFC的基本概念首先，贴出官方文档，https://www.w3.org/TR/2011/RE...CSS2.1规范的中文翻译：https://github.com/ayqy/CSS2-1下面是原文的摘要浮动、绝对定位元素、不是块盒的块容器（如inline-blocks、table-cells、table-captions）、块盒使用“溢出”而不是“可见”（除非该值已传播到视口）为其内容建立新的块格式化上下文。在块格式化上下文中，框一个接一个地垂直放置，从包含块的顶部。两个同级框之间的垂直距离由“边距”属性确定。块格式化上下文中相邻块级框之间的垂直边距折叠。在块格式化上下文中，每个框的左外边缘接触包含块的左边缘（对于从右到左的格式，右边缘接触）。即使在有浮子的情况下也是如此（尽管一个盒子'slineboxesmayshrinkduetothefloats），除非盒子建立了一个新的块格式化上下文（在这种情况下，盒子本身可能会因为浮动而变得更窄）。有关分页媒体中分页符的信息，请参阅允许分页符部分。翻译：浮动的、绝对定位的元素、不是块框的块容器（如inline-blocks、table-cells、table-captions），还有'overflow'不'visible'的块框（当Values有被传播到视口（除非该值已经传播到视口）将为其内容建立一个新的块格式化上下文在块格式化上下文中，框一个接一个地垂直放置，两个兄弟框之间的垂直距离来自包含块的顶部由“边距”属性确定。同一块格式化上下文中相邻块级框之间的垂直边距合并到单个块格式化上下文中，每个框的左外边缘紧挨着包含块的左外边缘（对于从右到左的格式，紧随其后的是右外边界）。即使存在浮动也是如此（尽管框的行框可能会因浮动而缩小）。除非框establishes了一个新的blockformattingcontext（这种情况下，box本身可能会因为浮动而变窄），感觉这样直接粘贴文档不是很合??适。简书里有篇文章讲的比较好。我摘录了一部分。原文：https://www.jianshu.com/p/666...在讲解什么是BFC之前，有必要介绍一下Box和FormattingContext的概念。1.1Box：CSS布局的基本单元Box是CSS布局的对象和基本单元。直观来说，一个页面是由很多Box组成的。元素的类型和显示属性决定了Box的类型。不同类型的Box会参与不同的FormattingContext（决定如何渲染文档的容器），因此Box内部的元素会以不同的方式呈现。看看都有哪些框：块级框：显示属性为block、list-item、table的元素会生成块级框。并参与块格式化上下文；inline-levelbox:display属性为inline,inline-block,inline-table的元素会生成一个inline-levelbox。并参与内联格式化上下文；onlyinrun-inbox:css3,https://codepen.io/wenjul/pen...1.2格式化上下文格式化上下文是W3CCSS2.1规范中的一个概念。它是页面中的一个渲染区域，有一套渲染规则，决定了它的子元素将如何定位，以及与其他元素的关系和交互。最常见的格式化上下文是块格式化上下文（简称BFC）和内联格式化上下文（简称IFC）。CSS2.1中只有BFC和IFC，CSS3中增加了GFC和FFC。1.3BFC定义BFC（Blockformattingcontext）直译为“块格式化上下文”。它是一个独立的渲染区域，只有Block-levelbox参与，它规定了内部Block-levelBox如何布局，与该区域外部无关。1.4BFC布局规则1.内部的Boxes会在垂直方向上依次放置。2.Box的垂直距离由margin决定。属于同一个BFC的两个相邻框的外边距会重叠3.每个元素的外边距框的左侧触及包含块边框框的左侧（对于从左到右的格式，否则相反）。即使有浮动也是如此。4、BFC区域不会与浮动框重叠。5、BFC在页面上是一个隔离独立的容器，容器内的子元素不会影响外面的元素。反之亦然。6、计算BFC的高度时，浮动元素也参与计算2、如何创建BFC（哪些元素会生成BFC）？其实BFC出现的场景几乎都在规范里列出来了，下面的子项再列出来。根元素的float属性不是noneposition是absolute还是fixeddisplay是inline-block,table-cell,table-caption,flex,inline-flexoverflow是不可见的(hidden,scroll,auto,)3.回答几个问题BFChttps://codepen.io/zhaojianxi...https://codepen.io/zhaojianxi...https://codepen.io/zhaojianxi...https://codepen.io/zhaojianxi...https://codepen.io/zhaojianxi...https://codepen.io/zhaojianxi...4.父子元素的边距重叠现象首先提出一个问题，如果你想让子元素的顶部距离父元素100px，你会怎么做？你肯定会的。给子元素设置margin-top为100px还不够吗？这样对吗？比那更多的。您还需要注意不要有重叠的边距。首先我们来试试写代码看看效果html代码
