先写到：BFC看似是一个很陌生的概念，但是在我们的工作中却时不时的发生。如何消除浮动效应？如何避免保证金渗透问题？如何编写两列响应式布局？他们都与BFC有着如此密不可分的关系，让我们一起进入车兔的世界，分分钟搞定BFC吧！1.什么是BFC？BFC概念块格式化上下文（BlockFormattingContext，BFC）是网页可视化CSS渲染的一部分，是块框布局过程发生的区域，也是浮动元素与其他元素交互的区域。简而言之，BFC是marginoverlap的一种解决方案。BFC原理BFC内部元素的垂直外边距会重叠BFC不会和浮动元素重叠BFC是一个独立的容器，不会影响里面的元素，里面的元素不会影响外面的元素计算BFC元素的高度浮动元素会也参与计算2.BFC生成条件的主流：根元素或包含根元素的元素浮动元素：floatisnotnone（float+float是wrapping和destruct，使其无法适配，一般在block中使用浮动布局）绝对定位元素：位置不是静态的也不是相对的（absolute不在文档流中）溢出值不可见的块元素（溢出可以自适应，但不可见的溢出限制了应用场景）内联块元素：显示是inline-block（inline-block是wrapping，不能自适应，IE8以下无法识别该属性）tablecell：元素的显示是table-cell（HTMLtablecell默认是这个值，table-cell是wrapping，无Overflow特性，绝对宽度也可自适应）非主流：表格标题：元素显示为table-caption，HTML表格标题默认为该值匿名表格单元格元素：元素显示为table,table-row,table-row-group,table-header-group,table-footer-group(分别为HTMLtable,row,tbody,thead,tfoot的默认属性)或者inline-tabledisplay值为flow-root的元素包含layout、content或strict值的元素flexible元素：display是flex或inline-flex元素的直接子元素grid元素：display是grid或inline-grid元素的直接子元素Multi-columncontainer：元素的column-count或column-width不是auto，包括column-count为1且column-span为all的元素总是会创建一个新的BFC，即使元素没有被multi包裹-columncontainer三、BFC使用场景1、margin渗透问题1、我在写样式的时候经常怀疑我margin是不是被浏览器吞掉了？作为子元素，我想距离父元素的topmargin有50px的距离，一般是这样显示的 剪女孩，剪女孩，剪女孩，剪女孩，剪女孩，剪女孩，剪女孩，剪女孩，剪女孩，剪女孩，剪女孩，剪女孩，剪女孩，剪女孩，剪女孩，剪女孩，剪女孩，剪女孩，剪女孩，剪女孩，剪女孩，剪女孩，剪女孩，剪女孩，剪女孩，剪女孩，剪女孩，剪女孩，剪女孩，剪女孩，剪女孩，剪女孩，剪女孩，剪女孩，剪女孩，剪女孩，剪女孩cutthegirl,cutthegirl兔妞cutTuNiu
