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

1 引言

float设计的初衷仅仅是实现文字环绕效果。所以当内部块级元素设置为float：left时，其兄弟的文字出现环绕效果：

<pre name="code" class="html"><div style="width:300px;height:200px;background-color:#ddd;">
    <div style="width:200px;height:100px;background-color:#ccc;float:left;"></div>
    Float的设计初衷仅仅是:实现文字环绕效果
</div>

效果如下：

换成图片：

<div style="width:300px;height:200px;background-color:#ddd;">
		<div style="width:200px;height:100px;background-color:#ccc;float:left;"></div>
		<img width=45px height=30px src="P_00.jpg"/>
		<img width=45px height=30px src="P_01.jpg"/>
		<img width=45px height=30px src="P_02.jpg"/>
		<img width=45px height=30px src="P_03.jpg"/>
</div>

效果：