<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>高度塌陷最终解决方案</title>
<style>
.box1{
border:solid tomato 10px;
}
.box2{
width: 200px;
height: 200px;
background-color: violet;
/* 当我们设置浮动后，高度塌陷了。
我们分析，如果给 box1 中手动添加一个元素box3，（此时在文档流中）会撑起父元素的高度,我们把Box3的浮动影响清除即可.
这样可以解决问题，但是我们手动添加了这样一个box3 造成页面布局增加了(不推荐)。
此时我们可以考虑，使用css样式的伪元素选择器，在我们的box1最后加上一个（块元素），使之在文档流中，并清除浮动元素对它的影响，那么我们就
可以解决问题.
*/
float:left;
}
/* 解决高度塌陷最终方案 */
.box1::after{
content: '';
clear: both;
/* 一定要将它变成块元素，行内元素无法撑起高度 */
display: block;
}
.box3{
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<!-- <div class="box3"></div> -->
</div>
</body>
</html>
来源：oschina
链接：https://my.oschina.net/u/3994350/blog/3213187