css清除浮动的八种方式你知道多少呢？

清除浮动是每一位web前端工程师必须掌握的知识，以下HTMl文件，对div1子标签进行float浮动。如下：

<div class="test">

<div class="div1">
<div class="left">one</div>
<div class="right">two</div>
</div>
<div class="div2">divdiv</div>
</div>

<style>
.div1{background:#eee;border:1px solid red;}
.div2{background:#000;border:1px solid green;height:100px;margin-top: 10px;}
.left{float:left;width:20%height:200px;background: #ddd;}
.right{float:right;width:30%height:80px;background: #aaa;}

</style>

那么要清楚浮动以有下八种方法，让我们一起去看看他们的用法和其中的原理:

1.父级div添加height

原理：父级div指定height,它不能自动获取高度的问题。

优点：简单，代码少，容易掌握

缺点：只适合高度确定的固定的布局

2.结尾处添加空标签clear:both;

原理：添加一个空div，，利用css提高的clear:both清除浮动，让父级div自动获取高度。

优点：浏览器支持好，浏览器不容易出现问题。

缺点：如果页面浮动布局太多， 就得增加很多空的div,让很多初学则不易理解。

3.父级div伪类：after和zoom

原理：原理类似于2；IE8以上浏览器支持：after，zoom是IE专有属性，IE6，7解决浮动的问题

优点：浏览器支持好，不易出现问题。

缺点：得两个命令同时使用才能很好的支持主流浏览器

4.父级div定义overflow：hidden；

原理：必须定义width或者zoom：1，同时，不能指定高度，，使用该命令，浏览器会自动检查浮动区的高度。

优点：浏览器支持好；

缺点：不能和position配合使用，因为超出的部分会被隐藏。

5.父级div定义overflow：auto；

原理：必须定义width或者zoom：1，同时，不能指定高度，，使用该命令，浏览器会自动检查浮动区的高度。

优点：浏览器支持好；

缺点：内部宽高超出父级div时会出现滚动条。

6.父级div也一起浮动
原理：所有代码一起浮动就变成一个整体了。

缺点：会产生新的浮动问题，所以不建议使用；

7.父级div定义display：table

原理：将div属性变成表格

不推荐使用

8.结尾处加br标签clear：both

原理：父级div定义zoom:1;来解决IE浮动问题，结尾处加br标签clear:both