现在有了flex布局等新技术，不再需要bfc的效果，比如包裹元素，进行自适应布局。现在只有自由的后见之明才需要了解BFC！我不明白CSS规范描述BFC9.4.1块格式化上下文的定义浮动、绝对定位元素、非块框块容器（例如，内联块、表格单元格和表格标题）和“溢出”不“可见”的块框为其内容建立新的块格式上下文。在块格式上下文中，框从包含块的顶部开始垂直放置一个接一个。两个同级框之间的垂直距离由“边距”属性确定。同一块格式化上下文中相邻块级框之间的垂直边距被合并到单个块格式化上下文中，每个框的左外边缘紧邻包含块的左边缘（对于从右到左的格式，右边彼此相邻）。即使在有浮动的情况下也是如此（尽管一个盒子的行框可能会因为浮动而缩小）。除非盒子建立了一个新的块格式化上下文（在这种情况下，盒子本身可能会被浮动缩小）MDN描述的BFC块格式化上下文（blockformattingcontext）是一个网页out部分的可视化CSS渲染。是块级框布局出现的区域，也是浮层元素交互的区域。块格式化上下文由以下之一创建：根元素或其他包含元素浮动元素（元素的浮动不是无）绝对定位元素（元素具有绝对位置或固定位置）内联块（元素具有显示：内联块）表格单元格（元素有display:table-cell，HTML表格单元格默认属性）表格标题（元素有display:table-caption，HTML表格标题默认属性）溢出的块元素，值为不可见，显示：flow-rootcolumn-span:all应该总是创建一个新的格式化上下文，即使具有column-span:all的元素没有包装在多列容器中。块格式化上下文包括创建它的元素内的所有内容，但创建新块格式化上下文的后代元素中包含的元素除外。块格式化上下文对于定位（参见浮动）和清除浮动（参见清除）很重要。定位和清除浮动的样式规则仅适用于同一块格式化上下文中的元素。浮动不会影响其他块格式化上下文中元素的布局，清除浮动只会清除同一块格式化上下文中它前面的元素的浮动。张新旭对BFC的描述http://www.zhangxinxu.com/wor...BFC的全称是“BlockFormattingContext”，中文意思是“BlockFormattingContext”。palapala的特点一言难尽。你可以自己找到它们。这里就不细说了，以免混淆主次。总之，记住这句话：BFC元素特性的表现原则是，无论内部子元素如何汹涌，起伏不影响外部元素。因此，避免保证金穿透和明确浮动很容易理解。看不懂定义！不记得定义了！示例答案BFC不要试图记住他的定义。应该用一个例子来回答：功能一：父子使用BFC包裹浮动元素。（这里不是清浮动，.clearfix是清浮动）比如儿子浮动，那么父亲就不能盖住儿子，只有BFC才能盖住儿子。比如把父亲设置为float:left包裹儿子。什么算作bfc？定义中用bfc编写的浮动的、绝对定位的元素、不是块框的块容器（例如，inline-blocks、table-cells和table-captions）和'overflow'不是'visible'的块框将被创建他们的内容一个新的块格式化上下文现在可以理解了defined.baba{border:10pxsolidred;最小高度：10px；显示：流根；/*只触发BFC*//*display:float;*//*触发BFC*//*position:absolute;*//*触发BFC*//*display:inline-block;触发BFC*//*overflow:auto;触发BFC*//*display:table-cell;触发BFC*/}.erzi{背景：绿色；向左飘浮;宽度：300px；高度：100px；}显示：流根；/*触发BFC*//*display:float;*//*触发BFC*//*position:absolute;*//*触发BFC*//*display:inline-block;触发BFC*//*overflow:auto;触发BFC*//*display:table-cell;触发BFC*/上面几个属性会触发BFC的问题：元素变成BFC后，会触发其他效果，比如position:absolute;将绝对定位。该问题的解决方案是使用display:flow-root;，它只有一个效果，使当前元素成为BFC。无副作用。http://js.jirengu.com/winozoc...还有一个功能，类可以归于父亲对儿子的管理，如果一个div不是bfc，它的孩子的margin-top和margin-bottom元素将扩展到div之外的父级。示例：爸爸与儿子身高相同，不受边距影响。成为BFC后：外边距也被计算在内。Buyongbfc也可以解决这个问题。边距不能穿透边界。只需要加一个border-top，margin在.baba里面。可以看出，不存在完全需要BFC的情况。总结一下BFC的作用1：一个元素一旦具备以上属性，就是一个BFC，BFC会把内部元素包裹起来，不管内部元素是否浮动。并且内部元素的外边距不会超出这个父BFC的范围。功能二：划清兄弟之间的界限：让相邻的两个BFC之间的界限分明。比如：两个div是兄弟，如果哥哥是浮动的，那么哥哥就会叠在弟弟的上面，会覆盖住弟弟。这时候如果弟弟也变成了BFC，那么哥哥和弟弟的界限就很明确了，谁也挡不住谁。例子如下：http://js.jirengu.com/woduniq...总结BFC函数内部元素完全包裹（float等），外部元素定义明确，不重叠。面试官问的时候说：首先，一个BFC可以围住一个浮动元素，防止它越界（不过这个不是清除浮动，clearfix是用来清除浮动的），甚至子元素的外边距可以在不脱离父元素的情况下被包裹起来。比如举个代码例子，儿子是浮动元素，那么就写overflow:hidden;或溢出：自动；或显示：流根；onthefather，那么父亲会包裹住儿子，margin也会在父亲里面）一个浮动元素会和另一个非浮动元素重叠，浮动元素会浮动在两个元素之上。如果另一个元素写成bfc，那么这两个元素就不会互相重叠。记录上下边距合并问题点评：正常文档流中只有blockbox的垂直外边距才会合并外边距。行内框、浮动框或绝对定位之间的边距不会合并。大边距的值。即：两个块级元素的上下外边距一般会合并，内联元素和浮动元素绝对定位后不会合并。http://js.jirengu.com/rihoxab...
