一、bfc（block formatting context）
根據w3c的標準，頁面中的元素都有乙個隱含屬性block formatting context，
當開啟元素的bfc屬性以後元素會有如下特性：
父元素你的垂直外邊距不會和子元素重合，也就是子元素的垂直外邊距不會傳遞給父元素。
開啟bfc屬性的元素不會被浮動元素所覆蓋
開啟bfc的元素可以包含子元素
如何開啟元素的bfc屬性
設定元素浮動（使用這種方法雖然可以撐開父元素，但是會導致父元素寬度丟失，且由於父元素脫離了文件流，下面的元素依然會發生上移。所以不能解決高度塌陷問題）
設定元素絕對定位（這種方式和第一種一樣的）
設定元素為inline-block（display:inline-block;可以解決高度塌陷問題，下面的元素也不會發生上移，但是依舊會產生父元素寬度丟失，不推薦使用)
***設定overflow屬性為非visible的值***（設定為auto和hidden是解決高度塌陷***最小的一種方式，不過ie6及以下的瀏覽器不支援overflow：hidden；不過ie瀏覽器有另乙個隱藏屬性haslayout，該屬性和bfc屬性類似，可以通過設定zoom：1；來開啟該屬性。zoom可選值寫幾就放大幾倍，但是其他瀏覽器不支援，只有ie支援，可以將overflow和haslayout都開啟來相容所有瀏覽器）
二、clear清除浮動
當乙個元素設定了浮動時，他的下面那個兄弟元素會產生上移，要解決這個問題可以為上移元素設定clear：left；或者right或者both（清除浮動最大的影響，要麼左，要麼右）那麼元素就不會產生上移，可以利用這個特點解決高度塌陷問題。
解決方法，可以在浮動元素下面新增乙個空白的塊元素，對塊元素新增清除浮動屬性。（***很小，但是會新增多餘的結果）
既不新增多餘的結構，又解決高度塌陷問題：
通過after偽類新增乙個空內容，將空內容轉換成乙個塊元素，再對after清除浮動就能撐開父元素，解決高度塌陷問題。
.clearfix：after
/*相容ie6*/
.clearfix
解決高度塌陷問題
在文件流中，父元素的高度預設是被子元素撐開的 當為子元素設定浮動後，子元素會完全脫離文件流 此時會導致子元素無法撐起父元素的高度，導致父元素的高度塌陷 由於父元素的高度塌陷了，則父元素下的所有元素都會向上移動，導致頁面布局混亂 所以在開發中需要避免出現高度塌陷的問題 如何開啟元素的bfc 1.設定元...
解決高度塌陷問題
所謂高度塌陷就是在文件流中，父元素的高度預設是被子元素撐開的，也就是子元素多高，父元素就多高。但是當為子元素設定浮動以後，子元素會完全脫離文件流，此時將會導致子元素無法撐起父元素的高度，導致父元素的高度塌陷。由於父元素的高度塌陷了，則父元素下的所有元素都會向上移動，這樣將會導致頁面布局混亂。例如 c...
高度塌陷解決方法
如果父元素只包含浮動元素，且父元素未設定高度和寬度，那麼它的高度就會塌縮為零，也就是所謂的 高度塌陷 如果父級元素包含背景或者邊框，那麼溢位的元素就不像父級元素的一部分了。解決 高度塌陷 問題的方法 1.浮動父級元素，父級元素的高度就會擴大，直到完全包含它裡面的浮動元素。如果使用這種方法，一定要在該...