浮动作为网页布局的重要手段之一，给我们带来了诸多便利。但一些副作用也是值得我们去注意的。一旦某个元素具有了float属性之后就会脱离文档流，造成一些意向不到的后果。我们来看这么一个例子：

<div id="outer">    <div id="left"></div>    <div id="right"></div></div>

     设置其样式，分别对内部的两个div采用左浮动和右浮动，并对外面的盒子设置背景色和边框，设置这样的样式我们是期：外部盒子的高度随内部自适应为200px，含有红色背景和黑色边框：

 #left{width:200px;height:200px;background-color:gray;float:left;} #right{width:100px;height:200px;background-color: yellow;float:right;} #outer{background-color:red;border:1px solid black;}

我们看一下最终结果：

     很明显结果很让我们失望，外部盒子不仅高度没达到我们期望的自适应，而且背景也不存在，只留下孤零零的边框独自凄凉。这是为什么了？不是说内部盒子可以撑开外部盒子嘛？

     这就是浮动惹的祸了。因为浮动使得内部的两个div脱离了正常的文档流，不再占用原文档流的空间。也就意味着不再对外部包围他们的盒子产生任何影响，里面的高度对外面盒子无影响。外面盒子没了高度，背景色没有了依附无法显示。只有边框勉为其难，那怎么解决了？首先想到的就是给外面盒子设置高度。当这个高度设置多少合适了？如果里面的高度各异了？这显然不是解决问题的根本之道。

     问题出在哪里，我们就应该在那里解决问题。是浮动存在使得我们达不到期望的结果，我们就应该清除浮动，怎么清除，下文会一一道来。

1）额外标签法

    第一个，也是W3C推荐的方法就是使用额外标签的办法。这种方法就是在内容的末尾增加一个空的标签，并清除其前后的浮动。典型的做法就是使用<br style="clear:both;" />或者使用<div style="clear:both;"></div>。这种办法通过增加一个HTML元素并清除其兄弟元素的浮动，迫使外部容器撑开。不过这个办法会增加额外的标签。

2）使用overflow

    使用overflow属性。此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素(一般为外部的盒子)中定义CSS属性：overflow:auto或者overflow:hidden，即可！"zoom:1"用于兼容IE6。

3）使用伪元素选择器after

    使用after伪对象清除浮动。使用after伪元素和内容声明在指定的外部盒子后面添加内容(比如一个点)，然后再利用它来清除浮动。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；二、content属性是必须的。具体代码如下：

#outer:after{content:.;visibility:hidden;display:block;clear:both;height:0px;}

清除浮动后的结果如下：

     当然方法各有利弊，简单的说，空标签引入额外的元素，overflow可能对布局带来一些不可预知的问题，after伪元素代码复杂。使用的时候取决于个人喜好吧。