css---浮動問題

浮動：當一個元素包含一個浮動元素時，該元素會自動收縮，而不是被浮動元素撐開；

浮動的執行個體：

當不浮動時：

瀏覽器中效果：

添加浮動後：

瀏覽器中：

可以看到添加浮動後類名為wrap的父元素高度崩塌，變為一條線。

清除浮動的方法有：

1、在浮動元素後加上一個類名為clear的空標籤，並在css樣式李清除浮動。（加入了一個毫無意義的空標籤）

2、給父元素wrap定義高度；（但高度未知時並不適用）

3、給父元素添加樣式overflow:hidden/scroll/auto。（使用hidden時可能會隱藏有用的東西）

4、給父元素類名中加上clearfix，在樣式中加入。

.clearfix:before,.clearfix:after{display:table;content:"";}
.clearfix:after{clear:both;}

.clearfix{*zoom:1}

這四種方法都可以清除浮動（都可以達到沒有浮動時的效果，但都有各自的缺點與優點）

效果：