在文件中，父元素的高度預設是被子元素撐開，但是當子元素設定浮動以後，子元素會完全脫離文件流，此時將會導致子元素無法撐起父元素的高度，導致父元素塌陷，下面的元素會向上移動。
根據w3c標準，頁面中隱含乙個block formatting context 簡稱bfc，該屬性可以開啟或關閉，當開啟父元素的bfc以後，會有以下特性：
1、父元素的垂直外邊距不會和子元素重疊
2、開啟bfc的元素不會被浮動元素所覆蓋
3、開啟bfc的元素可以包含浮動的元素
開啟bfc（ie6不支援，ie6中設定zoom:1避免高度塌陷，zoom是放大元素，後面是放大倍數）
1、設定元素浮動：雖然可以撐開，但是父元素寬度丟失，也會導致下面元素上移
2、設定元素絕對定位
3、設定元素為inline-block：可以撐開，但是父元素寬度丟失
4、將元素的overflow設定為乙個非visible的值
推薦：將父元素overflow設定為hidden,但開啟相對定位會出現影響
可選值
none：預設值，不清除浮動
left:清除左側浮動元素對當前元素的影響
right:清除右側浮動元素對當前元素的影響
both:清除兩側浮動元素對當前元素的影響，清除對它影響最大的元素的影響
可以直接在高度塌陷的父元素的最後，新增乙個空白的div，由於這個div沒有浮動，所以可以通過它可以撐開父元素的高度，然後對其清除浮動，可以通過空白的div撐開父元素的高度，基本沒有***
1、在頁面中新增空白div
.clear
在ie6中不支援after偽類。還需要通過開啟haslayout來處理。zoom:1
.box1:after
菜鳥學習HTML5 CSS3（一）
主要內容 1.新的文件型別宣告 dtd 2.新增的html5標籤 3.刪除的html標籤 4.重新定義的html標籤 一 新的文件型別宣告 dtd html 5的dtd宣告為 等也是正確的，因為html語法是不區分大小寫的。在編寫html5文件時，要求指定文件型別，以確保瀏覽器能在html5的標準模...
初學HTML5 CSS3動畫
乙個完整的css animations由兩部分構成 在css3中使用 keyframes規則來建立動畫，keyframes可以設定多個關鍵幀，每個關鍵幀表示動畫過程中的乙個狀態，多個關鍵幀就可以使動畫十分絢麗。keyframes animationname animation屬性用於描述動畫的css...
重頭學習html5 css3系列筆記（3）
復合選擇器 字型屬性 文字屬性 css 設定文字內容 字型，大小，對齊方式 的外形 寬度，邊框樣式，邊距 版面的布局和外觀顯示樣式 css美化html 讓html專注於結構 css由兩部分構成 選擇器 一條或多條宣告 css選擇器 又分基礎選擇器和復合選擇器兩大類 基礎選擇器 由單個選擇器構成，又包...