CSS里面的浮动属性是布局的常用工具，只有真正了解它并熟练使用才能将它的优点发挥到极致。
许多页面中都有文字绕图效果，并且各区块分布得错落有置，很多朋友在自学CSS布局时为了做出这些效果往往会被div只能独占一行的默认样式搞的头大，但使用了浮动属性，布局就变得简单、美观了。
任何元素都可以被浮动，段落标签<p>、<div>、<table>、<img>，甚至<span>、<b>、<h1>等等都可以，而且所有被定义为浮动的元素都会被自动变为“块状元素”，也就是我们先前讲过的“盒装模型”，也就是代表它可以定义宽度和高度了。
CSS中浮动属性的定义是通过float来声明的，它规定了元素是向左靠还是向右靠，有三个值：
下面我们举个例子：
上面的例子将最外面的div置于右方，将内部的段落也置于div内部右方，就这样做到了内容的浮动。
如果将A元素居左放置在页面最左端，在它的后面跟随一个居左浮动的B元素，那么B元素就是贴着A元素排列的，以此类推，在水平宽度允许的条件下，可以放置多个居左浮动的元素，直到宽度没有多余的空间时，居左浮动的元素会绕到下一行的左侧显示。
举例：
html代码如下：
CSS代码：
以上代码的显示效果应该是一排水平排列的<li>，在超出宽度时，会折行显示，为了分清界限，我给它定义了一条右边线。
这种思路就是布局、列表排列的雏形。
吃了毒药，就一定要有解药。学会了怎样使用浮动属性，那必须学会怎样清除浮动。
清除属性通过clear来声明，它同样有四个值：
clear要达到的效果是，一个被清理的盒状元素无法与前置浮动保持在同一个水平位置上。它必须出现在其下方。
举例说明一下：
看看上面这个例子，也许你会明白一点，如果想让第二个div单独处于一行，只要把clear的属性值改为both即可。
一般情况下，清除功能可以达到预想效果，但是有时会出现些小的错误，这通常是浏览器的差别造成的，以后我会教大家如何弥补这些小错误。
许多页面中都有文字绕图效果，并且各区块分布得错落有置，很多朋友在自学CSS布局时为了做出这些效果往往会被div只能独占一行的默认样式搞的头大，但使用了浮动属性，布局就变得简单、美观了。
任何元素都可以被浮动，段落标签<p>、<div>、<table>、<img>，甚至<span>、<b>、<h1>等等都可以，而且所有被定义为浮动的元素都会被自动变为“块状元素”，也就是我们先前讲过的“盒装模型”，也就是代表它可以定义宽度和高度了。
浮动float的定义方法
CSS中浮动属性的定义是通过float来声明的，它规定了元素是向左靠还是向右靠，有三个值：
- left：居左；
- right：居右；
- none：默认属性，不浮动。
下面我们举个例子：
<div style="float:right;100px;height:100px;">
<p style="float:right;50px;background:#F00;">文字</p>
</div>
上面的例子将最外面的div置于右方，将内部的段落也置于div内部右方，就这样做到了内容的浮动。
水平浮动的层叠
如果将A元素居左放置在页面最左端，在它的后面跟随一个居左浮动的B元素，那么B元素就是贴着A元素排列的，以此类推，在水平宽度允许的条件下，可以放置多个居左浮动的元素，直到宽度没有多余的空间时，居左浮动的元素会绕到下一行的左侧显示。
举例：
html代码如下：
<ul>
<li>float01</li>
<li>float02</li>
<li>float03</li>
<li>float04</li>
<li>float05</li>
<li>float06</li>
<li>float07</li>
<li>float08</li>
</ul>
CSS代码：
ul {
500px;
background:#000;
padding:5px;
}
li {
float:left;
border-right:1px solid #000;
height:20px;
padding-right:100px;
background:#FFF;
margin-bottom:1px;
}
以上代码的显示效果应该是一排水平排列的<li>，在超出宽度时，会折行显示，为了分清界限，我给它定义了一条右边线。
这种思路就是布局、列表排列的雏形。
清除属性-clear
吃了毒药，就一定要有解药。学会了怎样使用浮动属性，那必须学会怎样清除浮动。
清除属性通过clear来声明，它同样有四个值：
- clear:left;清除左侧。
- clear:right;清除右侧。
- clear:both;清除两侧。
- clear:none;不清除。
clear要达到的效果是，一个被清理的盒状元素无法与前置浮动保持在同一个水平位置上。它必须出现在其下方。
举例说明一下：
<div style="float:left; background:#F00;">顶部第一个div向左浮动，无清除效果</div>
<div style="clear:right;">第二个div清除右侧内容</div>
<div style="float:left;">第三个div，无清除效果，居左浮动</div>
<div style="float:left;">第四个div，无清除效果，居左浮动</div>
看看上面这个例子，也许你会明白一点，如果想让第二个div单独处于一行，只要把clear的属性值改为both即可。
一般情况下，清除功能可以达到预想效果，但是有时会出现些小的错误，这通常是浏览器的差别造成的，以后我会教大家如何弥补这些小错误。
0
喜欢
0
赠金笔
前一篇：2011年09月03日
后一篇：span的属性特点