2 float特性

2.1 包裹性

未浮動：

<div style="width:300px;height:200px;background-color:#ddd;">
		<div style="background-color:#ccc;">hi</div>
</div>

浮動後：

<div style="width:300px;height:200px;background-color:#ddd;">
		<div style="background-color:#ccc;float:left">hi</div>
</div>
 

結論：未設寬度的塊級元素浮動後展示效果如果內聯元素，會自動收縮包裹其內容。具有相同特性的css樣式還有：

display:inline-block/talbe-cell

position:absolute/fixed

overflow:hidden/scroll

2.2 破壞性

破壞性比較簡單，就是指子塊浮動會使沒有高度的父快高度塌陷。不再贅述。

2.3清除隱藏的空隙

先看網頁結構：

	<div style="width:300px;height:200px;background-color:#ddd;">
		<img width=60px height=40px src="P_00.jpg"/>
		<img width=60px height=40px src="P_01.jpg"/>
		<img width=60px height=40px src="P_02.jpg"/>
		<img width=60px height=40px src="P_03.jpg"/>
	</div>
 

注意到寫程式碼時候雖然img之間沒有空格，但是頁面顯示的時候圖片間會出現空隙，我叫它隱藏的空隙，這是由於img元素之間的回車符造成的。

浮動所有img效果：

我這裡還去掉了父元素的高度，在圖片元素前加入字元hi，所以也可以看出浮動的破壞性。