BFC的介绍及使用

使用环境

1.什么是边距重叠以及什么情况下会发生边距重叠

        由于 两个box盒子都设置了margin边距值，那么这两个box在垂直方向上就会发生外边距重叠，此时边距值以较大的一方为准。

重叠情况

        1)父子级重叠

                如果子元素设置了外边距，而父元素没有变为BFC的情况下，父元素也会产生外边距

        解决方法:在父元素设置:overflow:hidden即可

        2)兄弟级重叠

                两个同级兄弟元素都设置了外边距，则在垂直方向上会发生重叠，以较大的为准

                

 

        解决方法:将两个元素分别放在两个不同的父元素里(在中间添加空元素或者伪类元素也可以)，为父元素设置overflow:hidden即可

 

 2.清除浮动

        如下图所示，父元素包含子元素，子元素设置了浮动脱离了文档流，但父元素没有变成BFC，就会受浮动的影响，造成高度的塌陷。

 解决方法:为父元素设置overflow:hidden，如下图

 3.阻止标准元素被浮动元素覆盖，实现自适应布局

如下图，我们如果要实现两列的自适应布局，或者阻止蓝色背景被红色背景覆盖，就需要给被影响的元素转换成BFC才能实现

 

 否则，如果我们不设置，而且给了蓝色背景宽度的话就会变成下图所示的，有一部分宽度被覆盖掉

 2.什么是BFC

        本身BFC是一种css的布局方式，只是我们可以利用它来解决外边距折叠的问题。

        直译为块级格式化上下文，把BFC理解成一块独立的渲染区域，BFC看成是元素的一种属性， 当元素拥有了BFC属性后，这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素.

3.如何触发BFC

• overflow: auto/ hidden;
• position: absolute/ fixed;
• float: left/ right;
• display: inline-block/ table-cell/ table-caption/ flex/ inline-flex/table-row、table-row-group
• table-header-group、table-footer-group、inline-table、flow-root、flex或 inline-flex、grid或 inline-grid
• overflow值不为visible的元素
• contain的值为layout-content,paint的元素