--快速解决css清除浮动的问题
为什么要清除浮动？
因为如果子盒子设置了浮动，父盒子没有设置高度，浮动的子元素会漂浮在空中(脱离标准流)，子盒子会脱离父盒子，此时父盒子的高度就变为0。
如何清除浮动？哪种方法最好？
第一种：
给父盒子设置固定高度：因为子盒子浮动了，就会脱离标准流，给父亲设置固定高度，这样父盒子就固定死了，但是如果下面还有很多内容怎么办呢？所以这个方法不严谨，不灵活。
第二种：
给最后一个浮动子元素后面加div标签 ,div设置clear:both样式：这种方法也可以清除浮动，但是也不推荐使用。
第三种：
给父元素添加overflow:hidden：这种方法也可以清除浮动，overflow:hidden;不仅可以清除浮动，还可以解决溢出隐藏的问题，以及解决外边距塌陷问题，但是这种清除浮动方法也不好，因为给父元素添加了overflow:hidden ,父元素也就设置了溢出隐藏，但是这是我们不想看到的。这种方法不适用。
第四种：
使用after伪元素清除浮动，伪元素最好写单引号，因为单引号兼容性比较好（推荐使用）
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
下面是通过一个大盒子里面嵌套两个子盒子来验证清除浮动的四种方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.clearfix:after {
content: '';
clear: both;
display: block;
height: 0;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
.box {
border: 1px solid #000;
/* 清除浮动第一种方法：父元素加固定高度(缺点：不够灵活) */
/* height: 200px; */
/* 2. 父元素加overflow:hidden 缺点父元素加了溢出隐藏*/
/* overflow: hidden; */
/* 3. 给最后一个浮动子元素后面加div标签 div设置clear:both样式 缺点：增加div标签代码多余*/
/* 4 伪元素清除浮动 */
}
.box1 {
float: left;
width: 200px;
height: 200px;
background: cyan;
}
.box2 {
float: left;
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="box1"></div>
<div class="box2"></div>
<div style="clear: both;"></div>
</div>
</body>
</html>