DIV流式布局（float和clear）-CFANZ编程社区

DIV流式布局（float和clear）_float

语法：

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;
}

效果如下：

DIV流式布局（float和clear）_流式布局_02

常用布局方法应为：

#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;
}