DIV流式布局（float和clear）

语法：

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 >第一个div</div>
  <div >第二个div</div> 
  <div >第三个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）

常用布局方法应为：

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

秒客网

DIV流式布局（float和clear）

相关文章