DIV+CSS区块框浮动设计_html/css

这篇文章就总结几种简单的区块框浮动的例子：

1.不浮动区块框排序

						框（1）	框（2）	框（3）	

重新定义#one选择器，只需要添加一行代码：

	#one{	float:right;	background:red;	}

3.设置第一个向左浮动

为了能让大家看出效果，必须要调整三个区块的大小，所以直接重新写代码了。

						框（1）	框（2）	框（3）	

不难看出，框（2）被框（1）给覆盖了。只有多出来的40px的宽度能看见。因为框（1）浮动之后，就不属于文档流范围，相当于它原先的位置空了出来，所以框（2）自然就补了上去。

4.设置三个框都向左浮动

这个只需要在例1中的div{ }中加一句代码：

float:left;

5.设置三个框向左（空间不足）

只需要相应的修改三个区块的大小即可

						框（1）	框（2）	框（3）	

空间不足的话，区块就自动下移了

6.第三个区块被第一个“卡住”

区块3在上面没有足够的空间，下移的时候，区块1多出的部分会自动阻挡区块3的移动。

最后再介绍一个属性：clear（清除属性，指定一个元素是否允许有元素漂浮在它的旁边）

clear:none;clear:left;clear:right;clear:both;