对BFC的理解

BFC

通俗理解

创建BFC

BFC的特性

BFC的作用

外边距折叠

<style>
   .container {
       overflow: hidden;//最外面的容器为bfc
   }
   .container .box {
       width: 150px;
       height: 150px;
       background: red;
       margin: 10px;
   }
</style>

<div class="container">
   <div class="box"></div>
   <div class="box"></div>
</div>

外边距折叠（Margin collapsing）只会发生在属于同一BFC的块级元素之间。如果它们属于不同的 BFC，它们之间的外边距则不会折叠。所以通过创建一个不同的 BFC ，就可以避免外边距折叠

<style>
    .container {
        overflow: hidden;//最外面的容器为bfc
        background: blue;
    }

    .container .box {
        width: 150px;
        height: 150px;
        background: red;
        margin: 10px;
    }
    .newBFC {
        overflow: hidden;//创建BFC，解决外边距折叠问题
    }
</style>

<div class="container">
    <div class="box"></div>
    <div class="newBFC">
       <div class="box"></div>
    </div>
</div>

参考博客： https://segmentfault.com/a/1190000013647777