CSS浮动属性和清除属性的使用方法

    CSS里面的浮动属性是布局的常用工具，只有真正了解它并熟练使用才能将它的优点发挥到极致。

    许多页面中都有文字绕图效果，并且各区块分布得错落有置，很多朋友在自学CSS布局时为了做出这些效果往往会被div只能独占一行的默认样式搞的头大，但使用了浮动属性，布局就变得简单、美观了。

    任何元素都可以被浮动，段落标签<p>、<div>、<table&gt;、<img>，甚至<span>、<b>、<h1>等等都可以，而且所有被定义为浮动的元素都会被自动变为“块状元素”，也就是我们先前讲过的“盒装模型”，也就是代表它可以定义宽度和高度了。

浮动float的定义方法
    CSS中浮动属性的定义是通过float来声明的，它规定了元素是向左靠还是向右靠，有三个值：

    left：居左；
    right：居右；
    none：默认属性，不浮动。


下面我们举个例子：

  <div style="float:right;width:100px;height:100px;">

    <p style="float:right;width: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 {

  width: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即可。

    一般情况下，清除功能可以达到预想效果，但是有时会出现些小的错误，这通常是浏览器的差别造成的，以后我会教大家如何弥补这些小错误。