清除浮动是每一个web前端必须掌握的技能，下面就来看看有哪些方法吧。

以下面的场景为例，给大家展示一下不清除浮动带来的“车祸现场”。例子中有两个div，一个div1，一个div2，div1中包含一个向左浮动的div和一个向右浮动的div，为方便观察，给他们都添加了背景颜色，代码如下：

css:
<style type="text/css">.div1{background:#000080;border:1px solid red;}.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}.left{float:left;width:20%;height:200px;background:#DDD}.right{float:right;width:30%;height:80px;background:#DDD}
</style>html:
<div class="div1"><div class="left">Left</div><div class="right">Right</div>
</div>
<div class="div2">div2</div>

执行出来效果如下：

下面来介绍一下几种清除浮动的方法，以上面例子为例，基本样式不变，修改部分代码可实现清除浮动：

方法1：给浮动元素的父级div添加高度，代码如下：

css:
<style type="text/css">.div1{.../*解决代码*/height:200px;}...
</style>

执行出来的效果如下：

原理：父级div手动设置height，就解决了父级div无法自动获取高度的问题。缺点：只适合高度固定的布局，如果浮动元素的高度大于父级元素的高度，还是会存在问题。【不推荐使用，只建议高度固定的布局时使用】

方法2：在浮动元素的结尾处添加空的div标签，样式写clear:both，代码如下：

css:
<style type="text/css">.../*清除浮动代码*/.clear{clear: both;}
</style>html:
<div class="div1"><div class="left">Left</div><div class="right">Right</div><div class="clear"></div>
</div>
<div class="div2">div2</div>

原理：利用css样式中的clear:both清除浮动，让父级div能自动获取到高度。缺点：如果页面浮动布局多，就要增加很多空div，让人感觉很不好。【不推荐使用，此方法是以前主要使用的一种清除浮动的方法】

方法3：给父级div添加一个class，定义伪类:after和zoom，代码如下：

css:
<style type="text/css">.../*清除浮动代码*/       .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}.clearfloat{zoom:1}
</style>html:
<div class="div1 clearfloat">...
</div>
<div class="div2">div2</div>

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE专有属性)可解决ie6,ie7浮动问题。【推荐使用，建议定义公共类，以减少CSS代码】

方法4：给父级div定义overflow:hidden，代码如下：

css:
<style type="text/css">.div1{.../*解决代码*/overflow:hidden;}...
</style>

原理：使用overflow:hidden时，浏览器会自动检查浮动区域的高度。不能和position配合使用；不能同时定义height，不然超出的尺寸会被隐藏。【只推荐没有使用position或对overflow:hidden理解比较深的朋友使用】

上面说的是一些常用的方法，还有一些其他的方法，就不推荐给大家了。

附：启蒙链接：https://www.jb51.net/css/173023.html