CSS-float浮动与流体布局（2）

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，所以也可以看出浮动的破坏性。