BFC

BFC可以看做是一个元素的属性，拥有BFC这个属性的元素可以看做是隔离的独立容器，容器里面的元素不会在布局上影响到其他元素。

如何触发BFC

• 元素（）
• 浮动元素（元素的float不是none）
• 绝对定位元素（元素的position为absolute或fixed）
• display为
  • inline-block，
  • table-cell，table-caption，table，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的元素
• 多列容器（元素的column-count或column-width不为auto，包括column-count为1）

BFC特性及应用

• 避免外边距重叠 问题：两个div间距只有100px => 非bug，是规范，块的上外边距和下外边距会合并未单个边距，其值大小为单个边距的最大值，这是外边距重叠现象

    <div class="cube"></div>
    <div class="cube"></div>
    
    .cube {
        width: 100px;
        height: 100px;
        background: blue;
        margin: 100px;
    }

解决：运用overflow:hidden触发container的BFC，使两个div的外边距变成了期望的200px codepen.io/zouyushen/p…

    <div class="container">
        <div class="cube"></div>
    </div>
    <div class="container">
        <div class="cube"></div>
    </div>
    
    .container {
        overflow: hidden;
    }
    .cube {
        width: 100px;
        height: 100px;
        background: blue;
        margin: 100px;
    }

清除浮动

问题：高度塌陷 => 元素浮动，脱离了文档流，导致container高度塌陷，只剩2px的边距高度

    <div class="container">
        <div class="cube"></div>
    </div>
    .container {
        border: 1px solid #red;
    }
    .cube {
        width: 100px;
        height: 100px;
        background: blue;
        margin: 100px;
        float: left;
    }

解决： codepen.io/zouyushen/p…

    <div class="container">
        <div class="cube"></div>
    </div>
    .container {
        border: 1px solid red;
        overflow: hidden;
    }
    .cube {
        width: 100px;
        height: 100px;
        background: blue;
        margin: 100px;
        float: left;
    }

阻止元素被浮动元素覆盖

问题：浮动元素覆盖了没有添加浮动的元素

    <div class="floatDiv"></div>
    <div class="normalDiv"></div>
    
    .floatDiv {
        width: 100px;
        height: 100px;
        background: blue;
        float: left;
    }
    .normalDiv {
        width: 200px;
        height: 200px;
        background: red;
    }

解决：是第二个元素拥有BFC，这样两个元素不会互相干扰 codepen.io/zouyushen/p…

    <div class="floatDiv"></div>
    <div class="normalDiv"></div>
    
    .floatDiv {
        width: 100px;
        height: 100px;
        background: blue;
        float: left;
    }
    .normalDiv {
        width: 200px;
        height: 200px;
        background: red;
        overflow: hidden;
    }