讓內層浮動的Div將外層Div撐開 -----清浮動

清浮動的好處寫多了都能體會到，解決高度塌陷， 一般情況下是要清除浮動的，不然會影響下面標簽的排版。

<div class="parent" style="width:300px; background-color:Red;">

測試

<div class="child" style="width:100px; height:100px; background-color:Green; float:left; margin:10px;">

左邊

</div>

如圖

 

方法1： 在浮動元素結尾添加一個空的div：

　　

<div style="clear:both"></div>

　　利弊：方法簡單，常用，有違結構與表現分離原則

方法2：爸爸跟着兒子一起浮動：

給父級div添加浮動

.parent{float:left}

　　利弊：代碼簡單，排版找虐

 

 方法3：display:table:

　　Amaze ui 里am-g的用法

.parent{ display:table}

　　利弊：代碼簡單，盒模型變成表格，此元素會作為塊級表格來顯示（類似 <table>），表格前后帶有換行符（弊端？）。

 

 方法4：高端借鑒：

 　　方法1跟3的升級版，不破壞結構

.parent:before,.parent:after {
content:"";
display:table;
}
.parent:after { clear:both; }/* For IE 6/7 (trigger hasLayout) */
.parent { zoom:1; }

 

.parent:after {content:"\200B"; display:block; height:0; clear:both; }
.parent { *zoom:1; }