高度塌陷问题产生的原因
想要了解产生高度塌陷问题的原因，先提及几个知识点：
1.在文档流中，父元素的高度默认是被子元素撑开的。
2.当子元素设置浮动以后，子元素会完全脱离文档流。
也就是说：当子元素浮动之后，子元素完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷
看看具体情况：
html部分：
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
css部分：
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
border: 10px red solid;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.box3{
height: 100px;
background-color: #ADFF2F;
}
</style>
效果：
设置box2浮动之前的效果：
可以看到，设置box2浮动后，box1发生了高度塌陷。
———————————————————————————————————————————
解决高度塌陷的方法
首先，根据以上的知识点，我们可以马上想到一种解决高度塌陷的方法，即：将父元素的高度写死，以避免塌陷问题的出现。但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方法是不推荐使用的！
那么，还有没有解决高度塌陷的方法呢？
直接引出另一个知识点：
根据w3c的标准，在页面中的元素都隐含一个属性叫做 Block Formatting Context。
简称BFC，当开启BFC之后，元素将会具有以下特性:
（1）父元素的垂直外边距不会和子元素重叠
（2）开启BFC的元素不会被浮动元素所覆盖
（3）开启BFC的元素可以包含浮动的所有元素
那么如何开启BFC呢？
1. 设置元素浮动
2. 设置元素绝对定位
3. 设置元素为inline-block
好，了解完这些之后，开始操作
———————————————————————————————————————————
解决高度坍塌方法一（不推荐）：
给父元素开启BFC属性（将父元素也设置为浮动）
html部分：
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
css部分：
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
border: 10px red solid;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.box3{
height: 100px;
background-color: #ADFF2F;
}
</style>
效果：
可以看到，父元素没有发生高度塌陷，但不对劲的地方显而易见！
直接来说缺点：父元素的宽度丢失，且父元素以下的元素会上移，导致页面混乱，不推荐这种方法！
———————————————————————————————————————————
解决高度坍塌方法二（不推荐）：
给父元素设置inline-block：
css部分：
.box1{
border: 10px red solid;
display: inline-block;
}
效果：
父元素的高度确实没有塌陷，但缺点显而易见！
直接来说缺点：父元素宽度丢失，不推荐这种方法！
———————————————————————————————————————————
解决高度塌陷方法三（不推荐）：
将父元素的overflow设置为一个非visible的值
css部分：
.box1{
border: 10px red solid;
overflow: hidden;
}
效果：
可以看到，父元素没有塌陷，宽度没有丢失
优点：使用overflow：hidden 来开启BFC解决高度塌陷问题，副作用最小！
注意：如果将overflow的值设置为scroll，会出现滚动条，若设置值为auto，效果正常。
———————————————————————————————————————————
解决高度塌陷方法四：
使用clear属性来清除浮动元素对其他元素的影响
来看看w3c对clear属性的说明及定义：
说明：
clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。
定义和用法：
clear 属性规定元素的哪一侧不允许其他浮动元素。
可选值：
*
left 在左侧不允许浮动元素。
*
right 在右侧不允许浮动元素。
*
both 在左右两侧均不允许浮动元素（清除对他影响最大的那个元素的浮动）。
*
none 默认值。允许浮动元素出现在两侧。
*
inherit 规定应该从父元素继承 clear 属性的值。
应用：直接在高度塌陷的父元素box1的最后，添加一个空白的子元素div：box3，然后在对其清除浮动，这样可以通过这个空白的div来撑开父元素的高度
html部分：
<body>
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
css部分：
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
border: 10px red solid;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.box3{
clear: both;
}
</style>
效果：
可以看到，父元素的高度没有发生塌陷！
直接来说优缺点吧：
优点：父元素没有发生高度塌陷，也基本没有副作用
缺点：使用这种方法虽然可以解决问题，但是会在页面中添加多余的结构！
我们想：既然这种方法基本没有副作用，那么我们能不能不在box1的后边添加一个空白的div，也能达到这种效果呢？
肯定是有的，上边的方法是用html添加了一个空白div，那我们来用css添加一个空白的div，就不会再页面中添加多余的结构！来看看方法五。
———————————————————————————————————————————
解决高度坍塌方法五：
通过after伪类，选中box1的后边，添加一个空白的块元素，让后对其清除浮动
html部分：
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
css部分：
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
border: 10px red solid;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.box1:after{
content:"";/* 添加一个空内容 */
display: block;/* 转换为一个块元素 */
clear: both; }
</style>
效果
可以看到父元素没有发生高度塌陷，直接来说优缺点：
优点：这添加一个div的原理一样，可以达到一个 相同的效果，而且不会再页面中添加一个多余的div，几乎没有副作用！
———————————————————————————————————————————
解决方案七（最佳）：
通过before和after伪类，在元素的前后加入一个content空内容
再使用display将内容设置为表格，继续使用clear属性值为both清除两侧元素对当前元素的影响。
.clearfix:before,.clearfix:after
{
content:"";
display:table;
clear:both;
}
哪个父元素发生高度塌陷，就对哪个父元素使用上面的代码！
优点：可以同时解决高度塌陷问题和父子元素外边距重叠问题。
———————————————————————————————————————————
结语：若文章有错误的地方，烦请在评论区指出。当然，我会不定时的重新编辑写过的文章，查错及优化，希望能将最好的文章展现给读者。
