BFC概念BFC（blockformattingcontext）块格式化上下文是网页中块级元素布局和浮动元素相互交互的区域。BFC是一个独立的布局环境（实际页面渲染时是不可见的），BFC构建的区域内部元素的布局不受外界影响。此功能可用于消除浮动元素对非浮动元素的影响。兄弟元素及其子元素的影响。在BFC中，元素从顶部开始一个接一个地垂直排列，两个元素之间的垂直间距由它们的边距值决定。在BFC中，两个相邻块级元素的垂直边距折叠。（后面详细解释）形成BFC的条件：1、浮动、绝对定位、固定定位，这些方式可以使元素脱离文档流，形成一个独立的BFC。2.display:inline-block/table-cells/table-captions/inline-flex（非块级元素的块容器元素）3.overflow:auto/hidden/scrolloverflow属性本身没有什么特别的，但是会生成BFC创造一个独立的布局环境，使元素不受浮动元素的影响。使用BFC清除浮动效果示例：BFC的作用：1.清除浮动的副作用（限制浮动在BFC区域内）2.展开父元素（围住浮动元素）清除浮动就是展开parentelement3.BlockMarginmerging4.BFCindependence可以用来布局关于marginmerging的三种场景：1.同一BFC环境下正常文档流中垂直相邻元素的marginmerging。2.合并父子元素的外边距。3.合并空元素本身的外边距。如果这个margin遇到另一个元素的margin，也会合并margin合并规则：1.当两个margin都是正的时候，取两者的最大值；2.当margins都是负的时候，取绝对值大的那个，然后，从0位置开始，负位移；3.有正负时，先取负margin的绝对值最大的，然后和最大的正margin值比较margin相加。所有相邻的保证金必须一起参与计算，不能一步一步进行。防止相邻元素的边距合并的方法：1.用非空内容、padding、border或clear分隔。2.不在共同流程中或被BFC分隔。3.使边距在垂直方向上不相邻。
