float:float 带来很多好处，但是也产生很多问题，如父容器倒塌
当一个元素设置浮动后，其他内容会环绕该浮动元素
脱离文档流
消除浮动
三种方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box {
border: 1px solid #ccc;
background: #fc9;
color: #fff;
margin: 50px auto;
padding: 50px;
/*方式二：给父元素添加overflow:*/
/*overflow: auto;*/
zoom: 1; /*zoom: 1; 是在处理兼容性问题 */
}
/*方式三：给父元素添加伪类 -----推荐使用*/
.box:after{
content: '';
display: block;
clear: both;
}
.div1 {
width: 100px;
height: 100px;
background: darkblue;
float: left;
}
.div2 {
width: 100px;
height: 100px;
background: darkgoldenrod;
float: left;
}
.div3 {
width: 100px;
height: 100px;
background: darkgreen;
float: left;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="box">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<!--方式一：添加额外div-->
<!--<div class="clear"></div>-->
</div>
</body>
</html>