.BFC概念： 塊級格式化上下文，是一個獨立的渲染區域，讓處於 BFC 內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響。 我們先瞭解一個名詞：BFC（block formatting context），中文為“塊級格式化上下文”。 先記住一個原則： 如果一個元素具有BFC,那麼內部元素 ...
.BFC概念：
塊級格式化上下文，是一個獨立的渲染區域，讓處於 BFC 內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響。
我們先瞭解一個名詞：BFC（block formatting context），中文為“塊級格式化上下文”。
先記住一個原則： 如果一個元素具有BFC,那麼內部元素再怎麼翻江倒海，翻雲覆雨，都不會影響外面的元素。所以，BFC元素是不可能發生margin重疊的，因為margin重疊會影響外面的元素的；BFC元素也可以用來清除浮動帶來的影響，因為如果不清除，子元素浮動則會造成父元素高度塌陷，必然會影響後面元素的佈局和定位，這顯然有違BFC元素的子元素不會影響外部元素的設定。
以下情況會觸發BFC:
•<html>根元素
•float的值不為none
•overflow的值為auto，scroll，hidden
•display的值為table-cell，table-caption和inline--block中的任何一個
•position的值不為relative和static 即 position: absolute/fixed
顯然我們在設置overflow值為hidden時使container元素具有BFC，那麼子元素child浮動便不會帶來父元素的高度坍塌影響。
利用偽類元素清除浮動：
.clearFix::after,.clearFix::before {
display: block;
content: '';
clear: both;
visibility: hidden;
height: 0;
}
.clearFix { zoom: 1;}
