浮动的环境：当我们有一个大盒子（只设置了宽，没有设置高），里面嵌套着若干个小盒子，为了布局从左到右显示，都设置为浮动。再从外部加一个大盒子的时候，因为上面大盒子内部的子盒子是浮动的，所以它们都是不占位的，这时候大盒子会顶到上面的盒子的位置。
清除子盒子浮动：
1、clear: left | right | both（这个使用的时候别设置父元素的高。）
2、给父元素使用overflow:hidden，此时会产生BFC，也就是格式化上下文，会渲染出一个vip区域。（这个使用的时候别设置父元素的高。）
3、单伪元素标签法
4、双伪元素标签法
5、直接设置宽高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.header, .main, .footer {
500px;
}
.header, .footer {
height: 100px;
background: #000;
}
.main {
background: #eee;
margin: 10px 0;
/*overflow:hidden;*/
}
.content {
300px;
height: 300px;
background: orange;
float: left;
}
.sidebar {
190px;
height: 300px;
background: green;
float: right;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
}
/*兼容ie浏览器*/
.clearfix {
zoom: 1;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="main clearfix">
<div class="content"></div>
<div class="sidebar"></div>
<!--消除浮动-->
<!--<div style="clear:both"></div>-->
</div>
<div class="footer"></div>
</body>
</html>
双伪元素标签法：
<style type="text/css"> .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } </style>
