一、清除浮动
当父元素不设置高度时，高度会随内容自适应。当父元素内部的所有子元素都设置浮动以后，子元素空间释放，导致父元素塌陷。
<!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>
<style>
*{
padding: 0;
margin: 0;
}
.parent{
/* overflow: hidden; */
}
.child{
float: left;
}
.div1{
background: red;
}
.div2{
background: blue;
}
.other{
background: #fff000;
}
</style>
</head>
<body>
<div class="parent">
<div class="child div1">
div1
</div>
<div class="child div2">
div2
</div>
</div>
<div class="other">
其他部分
</div>
<script>
</script>
</body>
</html>
如上，由于父元素没有高度，下面的元素会顶上去，造成页面的塌陷。因此，需要给父元素加个overflow:hidden属性，这样父元素的高度就随子级容器及子级内容的高度而自适应。如下：
由于在IE比较低版本的浏览器中使用overflow：hidden；是不能达到这样的效果，因此需要加上 zoom:1;
所以为了让兼容性更好的话，如果需要使用overflow:hidden来清除浮动，那么最好加上zoom:1;
二、溢出隐藏
给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。
<!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>
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 150px;
height: 60px;
background: skyblue;
/* overflow: hidden; */
}
</style>
</head>
<body>
<div>
今天天气很好！<br>今天天气很好！<br>
今天天气很好！<br>今天天气很好！<br>
</div>
<script>
</script>
</body>
</html>
三、外边距合并
父级元素内部有子元素，如果给子元素添加margin-top样式，那么父级元素也会跟着下来，造成外边距塌陷，如下：
<!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>
<style>
* {
padding: 0;
margin: 0;
}
.box {
background: skyblue;
}
.kid {
width: 100px;
height: 100px;
background: yellow;
margin-top: 20px
}
</style>
</head>
<body>
<div class="box">
<div class="kid">子元素1</div>
</div>
<script>
</script>
</body>
</html>
给父级元素添加overflow:hidden，就可以解决这个问题了。如下：
<!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>
<style>
* {
padding: 0;
margin: 0;
}
.box {
background: skyblue;
overflow: hidden;
}
.kid {
width: 100px;
height: 100px;
background: yellow;
margin-top: 20px
}
</style>
</head>
<body>
<div class="box">
<div class="kid">子元素1</div>
</div>
<script>
</script>
</body>
</html>