什麼是高度塌陷？

在文件流中，父元素的高度預設是被子元素撐開的，也就是子元素多高，父元素就多高。但是當子元素設定浮動之後，子元素會完全脫離文件流，此時將會導致子元素無法撐起父元素的高度，導致父元素的高度塌陷。

原始碼： 

<div id="yeluosen">
     <div id="a1"></div>
     <div id="a2"></div>
</div>

1.加一個空div標籤清除浮動(缺點：不利於優化，優點：相容性強)

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

2. overflow+zoom（優點：相容性強。 缺點：對margin屬性有影響，不能設負值，設負值無效。負值絕對定位也不可以。）

#yeluosen{
     overflow:hidden;
     zoom:1;
}

3.after+zoom （最好用的，最推薦的，相容性也很好）

#yeluosen{
    zoom:1
}
#yeluosen:after{
     display:block;
     content:'',
     clear:both;
     height:0;
     overflow:hidden
}

4.讓父元素本身也浮動（不推薦，如果也設定浮動，父元素寬度就會隨著子元素變化）

#yeluosen{
    float:left;
}