什么是BFC？W3C表示，W3C规范中的BFC是这样定义的：浮动元素和绝对定位元素，非块级框的块级容器（例如inline-block、table-cells和table-captions），以及溢出值不可见的块级框将为其内容创建一个新的BFC（块级格式化上下文）。在BFC中，盒子从上往下依次垂直排列，两个盒子之间的垂直间距由它们的边距值决定。在BFC中，合并两个相邻块级框的垂直边距。在BFC中，每个框的左外边缘（margin-left）接触容器的左边缘（border-left）。对于从右到左的格式，触摸右边缘。MDN说块格式化上下文（BlockFormattingContext，BFC）是网页可视化CSS渲染的一部分，是布局过程中产生块级框的区域，是浮动元素与元素交互的限定区域。其他元素。正常人对以上两者的理解是贫乏和不可理解的。通俗地说，bfc就是一个盒子，无论里面的子元素发生什么变化，都不会影响到外面。我不能告诉你什么是BFC，但是你一看就知道它是BFC。如何触发BFC？复制mdn对触发BFC的定义根元素或包含根元素的元素浮动元素（元素的float不是none）绝对定位元素（元素的位置是absolute或fixed）Inlineblock元素（元素的显示是inline-block）TableCell（元素的显示元素为table-cell，默认为HTML表格单元格的值）tabletitle（元素的显示为table-caption，默认为HTML表格标题的值）anonymoustablecellelement（显示element是table,table-row,table-row-group,table-header-group,table-footer-group（分别为HTMLtable,row,tbody,thead,tfoot或inline-table的默认属性）的溢出值不可见的块元素displayvalue是flow-root元素containvalue是layout,content或strict元素elastic元素（display是flex或inline-flex元素的直接子元素）grid元素（display是grid或strict的直接子元素内联grid元素）子元素）多列容器（元素的column-count或column-width不是auto，包括column-count为1）column-span为all的元素总是会创建一个新的BFC，即使该元素未包装在多列容器中。以上是BFC常见触发的太长了，估计你记不住了，这里提供一个低配版的html根元素浮动元素，float不是none，可以绝对定位元素，absolute和fixeddisplay不是block块（inline-block、table-cell、table-caption）溢出值不可见的元素（hidden、auto、scroll）显示：flex、grid、flow-root为什么？为什么我要启动BFC，改其他的东西，显示不了：BFC？然后w3c终于实现了，推出了display:flow-root。这个属性的作用就是把元素变成BFC元素，没有其他副作用，仅此而已。NICE，马飞！BFC有什么用？你爸最好不要用BFC清除浮动，因为BFC还有其他的副作用，除非显示：flow-root所有浏览器都支持里面的子元素，不管你浮动什么的，都逃不过边框（包裹浮动元素），除了一种情况。假设我有3个元素从上到下嵌套
