清除浮动

     浮动做为网页布局的重要手段之一，给咱们带来了诸多便利。但一些反作用也是值得咱们去注意的。一旦某个元素具备了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伪元素和内容声明在指定的外部盒子后面添加内容(好比一个点)，而后再利用它来清除浮动。使用中需注意如下几点。1、该方法中必须为须要清除浮动元素的伪对象中设置height:0，不然该元素会比实际高出若干像素；2、content属性是必须的。具体代码以下：

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

清除浮动后的结果以下：

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