首先高度塌陷是怎么出现的：
当所有的子元素浮动的时候，并且父元素没有设置高度，这样父元素就会产生高度塌陷。
看别人讲的大概是：高度塌陷后，父元素的高度*为0，也就是我们在调试器查看元素时看到他缩成一小块了的样子。
具体的我后面碰到了再去思考了，现在也不是特别明白
这是设置浮动之前的效果：
这是设置了浮动之后的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.top {
width: 100%;
border: 1px solid red;
}
.container {
width: 100px;
height: 50px;
}
.top .left{
float: left;
}
.top .right{
float: right;
}
.bottom {
width: 100%;
height: 100px;
background-color: gray;
}
</style>
<body>
<section class="top">
<section class="container left">111111</section>
<section class="container right">222222</section>
</section>
<section class="bottom">
bottom
</section>
</body>
</html>
样子大概就这样
那么清除浮动的方式一：
给父元素添加overflow:hidden; 还有zoom:1;
加上后面的是针对ie6的兼容，不过超出部分会被隐藏，布局的时候要注意下
方式二：
在所设置浮动的最后加上一个空的div
例如：
<section class="top">
<section class="container left">111111</section>
<section class="container right">222222</section>
<section class="clearfloat"></section>
</section>
也就是<div class="clearfloat"></div>
然后给他个css样式
.clearfloat{
clear:both;
height:0;
overflow:hidden;
}
缺点：要是你好几处地方用了浮动，这个空的也就写得多
方式三：
给塌陷的元素添加一个 :after伪类,----------------top:after{
…
}
具体原理我不会，以后再去了解
不过貌似直接下面这样写也可以，估计是给全部都添加吧，我真不会，你们会的也可以评论教我，让我剽窃下。
`:after{
content:"";
clear:both;
height:0;
overflow:hidden;
visibility:hidden;
}
上面那行代码我手敲的，练练手记一下嘛，敲错字错了别怪我嘿嘿
方法四：
跟法一差不多：给父元素加个样式：
overflow：auto;
不过这里就有个小问题，他可能会有滑动条，不用问也是剽窃来的。
方法五：
都说了高度塌陷是因为父元素没有设置高度引发的，所以直接给父元素添加个高度就好了
不过兼容性不好，不能自适应布局。
其他的我就懒得写了，你别说方法还挺多。。。