根據w3c標準，在頁面中元素都有乙個隱含的屬性叫做 block formatting context，簡稱 bfc，該屬性可以設定開啟或者關閉，預設是關閉的。
當開啟元素的bfc以後，元素會具有以下特性：
1.父元素的垂直外邊距不會和子元素重疊
2.開啟 bfc 的元素不會被浮動元素覆蓋
3.開啟 bfc 的元素可以包含浮動的子元素
如何開啟元素的bfc？
1.設定元素浮動 （使用這種方式開啟 bfc 雖然可以撐開父元素，但是會導致父元素的寬度丟失，同事也會導致父元素下邊的元素上移，不能解決此問題）
2.設定元素的絕對定位
3.設定元素的 display 屬性設定為 inline-block （可以解決此問題，但是會導致寬度丟失，不推薦使用這種方式）
4.將元素的 overflow 屬性設定為乙個非 visible 的值
注：ie6中沒有 bfc，但是有另外乙個隱含的屬性叫做 haslayout，該屬性的作用和 bfc 類似，可以通過開啟 haslayout 來解決此問題，開啟方式很多，選乙個***最小的，直接將元素的 zoom 設定成 1 即可
解決子元素的浮動導致的父元素高度坍塌的問題
參考 當父元素中的子元素設定了float屬性時，可認為子元素就跳出了父元素的束縛而位於新的一層，此時父元素內部沒有元素，其高度就變為0。要解決這個問題，人為給父元素設定高度是不現實的，因為一般父元素的高度是由子元素決定的，為此我們可以從父子元素兩個角度出發，用兩種思路解決這個問題。1.子元素角度 新...
解決子元素浮動，父元素高度變小的問題
當子元素浮動時，脫離了文件流，不佔據原來的頁面空間，使父元素的高度變小，甚至為0，我們可以通過幾種方式來解決這個問題。解決辦法如下 1.設定父元素的overflow為hidden。缺點 把本應該顯示的元素隱藏。2.在知道父元素本應該是多高的情況下，設定父元素的高度。缺點 不知道父元素高度的不適合。3...
css 子元素設定float,父元素高度塌陷
以div元素為例。div元素的高度會通過內容自動撐開。也就是說，內容有多少，高度就有多高。但是當內部元素設定了float屬性之後，會是父元素高度塌陷 div class container p hello world hello world p div class clearfix div div ...