BFC塊級格式化上下文

規則

1. 內部的Box會在垂直方向，一個接一個地放置。
2. 屬於同一個BFC的兩個相鄰Box的margin會發生重疊。
3. BFC的區域不會與float box重疊。
4. BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素
5. 計算BFC的高度時，浮動元素也參與計算

BFC觸發原理

1 根元素
2 float屬性不為none,例如left、right
3 position為absolute或fixed
4 display為inline-block, table-cell, table-caption, flex, inline-flex
5 overflow不為visible，例如hidden、auto

作用

1. 清除浮動,BFC裡面的浮動元素高度也會參與計算

<div class="layout">
    <div></div>
     <div></div>
</div>

如果裡面的兩個div為浮動，那麼設置 .layout {overflow: hidden}

　　2. 防止margin重疊

總結：

BFC通俗地說：就是一個容器，裡外不相互影響，記住：清除浮動的時候，如果使用 overflow： hidden，是存在缺點的，如果超過了範圍，那麼則被隱藏了
清除浮動正確的方式：

.clearfix:after{
    content: '',
    height: 0;
    display: block;
    visibility: hidden;
    clear: both;
    line-height:0;//行高為0
}