DIV+CSS区块框浮动设计
在页面布局的时候，能够用绝对定位来实现，可是因为调整某个区块框时其它区块的位置不会对应的改变，所以这并非布局的首选方式。可是使用浮动的区块框能够向左或向右移动，直到它的外边缘碰到包括它区块的边框或还有一个浮动狂的边框为止。
而且因为浮动框不在文档的普通流中，所以文档的普通流中的区块框表现的像就浮动框不存在一样。
这篇文章就总结几种简单的区块框浮动的样例：
1.不浮动区块框排序
<html>
<head>
<title>DIV+CSS</title>
<style>
body{
margin:0px;
}
div{
width:200px;
height:200px;
font-size:40px;
text-align:center;
}
#one{
background:red;
}
#two{
background:green;
}
#three{
background:yellow;
}
</style>
</head>
<body>
<div id="one">
框（1）
</div>
<div id="two">
框（2）
</div>
<div id="three">
框（3）
</div>
</body>
</html>2.将第一区块框向右浮动
又一次定义#one选择器，仅仅须要加入一行代码：
#one{
float:right;
background:red;
}
执行结果例如以下：
3.设置第一个向左浮动
为了能让大家看出效果，必需要调整三个区块的大小。所以直接又一次写代码了。
<html>
<head>
<title>DIV+CSS</title>
<style>
body{
margin:0px;
}
div{
height:200px;
font-size:40px;
text-align:center;
}
#one{
width:200px;
float:left;
background:red;
}
#two{
width:240px;
background:green;
}
#three{
width:200px;
background:yellow;
}
</style>
</head>
<body>
<div id="one">
框（1）
</div>
<div id="two">
框（2）
</div>
<div id="three">
框（3）
</div>
</body>
</html>执行结果：
不难看出。框（2）被框（1）给覆盖了。
仅仅有多出来的40px的宽度能看见。
由于框（1）浮动之后，就不属于文档流范围，相当于它原先的位置空了出来，所以框（2）自然就补了上去。
4.设置三个框都向左浮动
这个仅仅须要在例1中的div{ }中加一句代码：
float:left;执行效果：
5.设置三个框向左（空间不足）
仅仅须要对应的改动三个区块的大小就可以
<html>
<head>
<title>DIV+CSS</title>
<style>
body{
margin:0px;
}
div{
float:left;
height:200px;
font-size:40px;
text-align:center;
}
#one{
width:500px;
background-color:red;
}
#two{
width:400px;
background:green;
}
#three{
width:600px;
background:yellow;
}
</style>
</head>
<body>
<div id="one">
框（1）
</div>
<div id="two">
框（2）
</div>
<div id="three">
框（3）
</div>
</body>
</html>执行结果：
空间不足的话，区块就自己主动下移了
6.第三个区块被第一个“卡住”
区块3在上面没有足够的空间，下移的时候。区块1多出的部分会自己主动阻挡区块3的移动。
最后再介绍一个属性：clear（清除属性，指定一个元素是否同意有元素漂浮在它的旁边）
clear:none; clear:left; clear:right; clear:both;一共同拥有这么几种值，分别相应不同的清除效果。灵活使用这个属性，非常多的问题都能简单解决。
浙公网安备 33010602011771号