高度塌陷
父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷（造成父元素高度为 0）
高度塌陷的解决方法
一、给父元素添加声明overflow：hidden
优点：代码少、简单
缺点：1、只适用于高版本游览器，IE6不支持。
2、不能和position定位配合使用，超出的尺寸会被隐藏
<style type="text/css">
.box{
margin: 200px auto;
width: 400px;
background: #42B983;
border: 3px solid #000000;
overflow: hidden;//***
}
.chl_box{
width: 200px;
height: 200px;
background: #00FFFF;
float: left;
}
</style>
<body>
<div class="box">
<div class="chl_box"></div>
</div>二、在浮动元素下方添加空div，并给元素声明 clear：both
优点：代码少，浏览器兼容好，只需要兼容 IE 浏览器，因为在IE兼容部分块元素会自带16px的高度，需要添加 height: 0;overflow: hidden;
缺点：需要添加多余的空标签并添加属性
<style type="text/css">
.box{
margin: 200px auto;
width: 400px;
background: #42B983;
border: 3px solid #000000;
}
.chl_box{
width: 200px;
height: 200px;
background: #00FFFF;
float: left;
}
</style>
<body>
<div class="box">
<div class="chl_box"></div>
<div style="height: 0;overflow: hidden;clear: both;"></div>
</div>
</body>三、万能清除浮动法
优点：浏览器支持好
缺点：代码多
<style type="text/css">
.box{
margin: 200px auto;
width: 400px;
background: #42B983;
border: 3px solid #000000;
}
.chl_box{
width: 200px;
height: 200px;
background: #00FFFF;
float: left;
}
.box::after{
content: "";
display: block;
clear: both;
height: 0;
overflow: hidden；
visibility: hidden;
}
</style>
<body>
<div class="box">
<div class="chl_box"></div>
</div>
</body>四、父元素添加浮动
缺点：会产生新的浮动问题
<style type="text/css">
.box{
margin: 200px auto;
width: 400px;
background: #42B983;
border: 3px solid #000000;
float: left;
}
.chl_box{
width: 200px;
height: 200px;
background: #00FFFF;
float: left;
}
</style>
<body>
<div class="box">
<div class="chl_box"></div>
</div>
</body>