清除浮動

不清除浮動的一個常見危害是高度塌陷。關於高度，下面說這麼幾種狀況：

1. 若是父元素已經規定了度，不會高度塌陷，但可能會溢出（若是子元素總高度超過父元素的話）
2. 若是父元素沒有規定高度：
   2.1 若是全部子元素都浮動，父元素沒有高度，這時候給父元素設置邊框的話，就會發現邊框保不住子元素
   2.2 若是存在沒有浮動的子元素，父元素高度取決於沒有浮動的子元素，因此若是浮動子元素更高的話，仍是會塌陷

解決浮動的辦法： clear:both，不容許元素兩側有浮動（你能夠理解爲，遇到浮動元素會往下挪，從而撐起高度）

1. 使用::after僞元素

.cl{zoom:1;}
.cl::after{content:'';display:block;height:0;visibility:hidden;clear:both;}

 

加兩個點是CSS3新規，兼容的話一個點就好

1. 直接爲父元素創建一個清除浮動的最末子元素，如

<div>
    <div style="float:left;">I M LEFT</div>
    <div style="float:right;">I M RIGHT</div>
    <div style="clear:both;"></div>
</div>

　　

缺點在於建立了沒必要要的節點，因此廣泛作法是第一種