浮动是一个非常好用的属性，但是有时会出现一些问题，需要进行清除浮动。例如
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.fa {background-color: red;width: 600px;/* height: 600px; */}.son1 {width: 200px;height: 200px;background-color: aqua;float: left;}.son2 {width: 300px;height: 200px;background-color: pink;float: left;}.div2 {width: 700px;height: 100px;background-color: orange;}</style>
</head><body><div class="fa">aaa<div class="son1"></div><div class="son2"></div></div><div class="div2"></div>
</body></html>
在父盒子没有给出高度的情况下，子盒子浮动不会将父盒子撑开来。
清除浮动使用clear:left|right|both 一般使用clear：both，具体方法如下：
1、在浮动标签后边添加一个额外的clear标签例如<div style="clear:both"></div>这样做的方法
例如 View Code
<body><div class="fa">aaa<div class="son1"></div><div class="son2"></div><div style="clear:both"></div></div><div class="div2"></div>
</body>结果如下，这种方法简单明了，但是会增加额外的标签
2、父级添加overflow:hidden|auto|scroll
在.fa 的css属性中增加overflow:hidden ，结果也如上图所示，例如
.fa {background-color: red;width: 600px;overflow: hidden;}这种方法方便快捷，但是元素内容多时易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素
3、使用after伪元素进行清除浮动
.clearfix:after {content: ".";/* 最好给content制定一个值防止旧版浏览器有空隙 */display: block;height: 0;visibility: hidden;clear: both;}.clearfix {*zoom: 1;/* 星号代表是ie6、ie7能识别的特殊符号zoom 是ie6、ie7清除浮动的方法*/}这样给父盒子增加一个clearfix 类即可实现1中的图片效果。
4、同时使用after和before清除浮动
.clearfix:before,.clearfix:after {content: "";display: table;}.clearfix:after {clear: both;}.clearfix {*zoom: 1;}用法和方法三一样，给父元素增加clearfix 类即可
第3、4种方法都是目前常用的方法，不增加多余标签，但是ie6和ie7不支持after，需要使用zoom：1来清除浮动
更多专业前端知识，请上 【猿2048】www.mk2048.com
