高度塌陷问题
什么是高度塌陷问题？高度塌陷问题是使用浮动属性的时候会经常遇到的问题。我们可以利用浮动属性来实现高效的水平布局，但是如果你写下面的代码，就会发现box1的高度出现问题，因为box1的高度是靠子元素box2撑起来的，现在box2变成了浮动元素，box1就没有了高度，这就造成了高度塌陷问题。
要解决这个问题有很多种自欺欺人的做法，比如强行写死高度等。这些解决方法都非常的无聊，并且问题特别多，本篇文章直接讲最完美的解决办法
<style>
.box1{
background-color: lightgreen;
border: lightsalmon 10px solid;
}
.box2{
height: 200px;
width: 200px;
background-color: lightblue;
float: left;
}
</style>
<div class="box1">
<div class="box2"></div>
</div>
clear属性
解决高度塌陷问题的一个比较完美的方案就是利用clear属性。
我们先看一下问题现象：在设置了float后，div2占据了div1的位置，但他的文字却环绕在下面。这明显是不合适的，而且非常的影响布局。我们可以用clear属性实现让div2不受float属性的影响，只对他自身无效。
.box1{
width: 200px;
height: 200px;
background-color: lightblue;
float: left;
}
.box2{
width: 200px;
height: 200px;
background-color: lightgreen;
}
<div class="box1">1</div>
<div class="box2">2</div>
使用clear属性： 使用也非常的简单，如下：
因为float设置是left，所以给clear设置一个left值这样，div2就不受float的影响了。这样即使div1设置了float属性，div2也不受影响了。
.box2{
width: 200px;
height: 200px;
background-color: lightgreen;
clear: left;
}
现在看一个新的现象:
有三个div，div1和div2分别设置左浮动和右浮动，div3添加clear:left属性，就会出现下面的效果。因为添加的是clear:left属性，所以右浮动对div3来说是透明的，直接占用他的空间。但div1对他来说不是透明的，会被顶住。
<style>
.box1{
width: 200px;
height: 200px;
background-color: lightblue;
float: left;
}
.box2{
width: 300px;
height: 300px;
background-color: lightgreen;
float: right;
}
.box3{
width: 200px;
height: 200px;
background-color: lightsalmon;
clear: left;
}
</style>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
如果设置为clear:right将会变成下面的效果：
虽然div3是可以占用div1的空间的，但是被div2顶住了。
还要一个属性是clear:both。效果是一样的，相当于同时设置了clear:right和clear:left,因为div2的高度更大，所以会取clear:right。
利用clear解决高度塌陷问题
我们先分析一下怎么用clear来解决高度塌陷问题。如果我们在蓝色div2的下方兄弟位置添加一个div3，并且设置clear属性，那么div2将会顶住div3，那么红色的div1将会有高度，高度就是div2的高度。
实现代码如下：
<style>
.box1{
background-color: lightgreen;
border: lightsalmon 10px solid;
}
.box2{
height: 200px;
width: 200px;
background-color: lightblue;
float: left;
}
.box3{
clear: both;
}
</style>
<div class="box1">
<div class="box2"></div>
<div class="box3">box3</div>
</div>
这里box3添加了文字，为了演示效果，去掉文字就是我们需要的效果。
这里还是存在一个问题就是我们凭空添加了一个div3，这是不太合理的。我们可以利用::after属性来实现这个功能。
我们只需要给.box1的::after设置下面三个属性就可以完美的解决高度塌陷问题。
我们必须设置display为block，因为默认情况下::after伪元素是行内元素。content必须有内容，哪怕是空字符串。
.box1::after{
content: "";
display: block;
clear: both;
}
这样就可以解决高度塌陷问题了。
外边距重叠问题
下面的效果是给子元素div2加了margin-top,设置者的目的是想div2相对div1撑开50px,但div1自身也撑开了50px，这就是外边距重叠问题。
可以通过调整父子的padding来投机取巧的实现这样的功能，但比较麻烦，而前面的clear属性也可以完美的解决这个问题。
<style>
.div1{
height: 200px;
width: 200px;
background-color: lightblue;
}
.div2{
height: 100px;
width: 100px;
background-color: lightgreen;
margin-top: 50px;
}
</style>
<div class="div1">
<div class="div2"></div>
</div>
解决问题的思路：
**和高度塌陷类似，如果我们在div2上方添加一个元素给他做，margin的对象，是不是可以解决问题？答案是可以的。**我们可以给div1添加::before伪元素作为div2的上方兄弟元素。
通过下面的代码就可以直接解决这个问题。
主要就是给出问题的div添加下面的属性。
1.content和上面一样，不能没有内容，所以设置为空字符
2.display设为table，这里不能设置伪block或者inline,或者block-inline。
.div1::before{
content: "";
display: table;
}
<div class="div1">
<div class="div2"></div>
</div>
高度塌陷问题和外边距重叠的统一解决方案clearfix方法
上面的代码是对同一个div分别添加了::before和::after来解决问题的，那么我们可以把两者写到同一个方法中，分别复用。
.clearfix::before,.clearfix::after{
content: "";
display: table;
clear: both;
}
给需要的元素添加上这个类就可以完美的解决这两个问题了。
给需要的元素添加上这个类就可以完美的解决这两个问题了。
给需要的元素添加上这个类就可以完美的解决这两个问题了。
<div class="div1 clearfix">
<div class="div2 "></div>
</div>
这个方法是《JavaScript权威指南》作者提出的。