DIV流式布局（float和clear）

来源：互联网发布：如何正确利用网络编辑：程序博客网时间：2024/06/06 07:26

语法：

float : none | left|right

参数：

none : 　对象不浮动
left : 　对象浮在左边
right : 　对象浮在右边

说明：

该属性的值指出了对象是否及如何浮动。请参阅clear属性。
当该属性不等于none引起对象浮动时，对象将被视作块对象(block-level)，即display属性等于block。也就是说，浮动对象的display特性将被忽略。
对应的脚本特性为styleFloat。请参阅我编写的其他书目。

语法：

clear : none | left|right | both

参数：

none : 　允许两边都可以有浮动对象
both : 　不允许有浮动对象
left : 　不允许左边有浮动对象
right : 　不允许右边有浮动对象

说明：

该属性的值指出了不允许有浮动对象的边。请参阅float属性。
对应的脚本特性为clear。请参阅我编写的其他书目。

.html代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>流式布局</title><link rel="stylesheet" type="text/css" href="css/style.css"/></head><body><div id="first">第一个div</div><div id="second">第二个div</div><div id="third">第三个div</div></body></html>

.css代码如下：

#first{width:200px;height:100px;background:#ab0;float:left;}#second{width:200px;height:100px;background:#fba;        clear:left;        }#third{width:200px;height:100px;background:#aca;        float:left;}

效果如下：

常用布局方法应为：

#first{<span style="white-space:pre"></span>width:200px;<span style="white-space:pre"></span>height:100px;<span style="white-space:pre"></span>background:#ab0;<span style="white-space:pre"></span>float:left;}#second{<span style="white-space:pre"></span>width:200px;<span style="white-space:pre"></span>height:100px;<span style="white-space:pre"></span>background:#fba;        float:right;                <span style="white-space:pre"></span>}#third{<span style="white-space:pre"></span>width:200px;<span style="white-space:pre"></span>height:100px;<span style="white-space:pre"></span>background:#aca;        clear:both;}

<img src="http://img.blog.csdn.net/20141125095922471?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWF5dW4wNTE2/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

0 0