<!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;css
/* 当咱们设置浮动后，高度塌陷了。
咱们分析，若是给 box1 中手动添加一个元素box3，（此时在文档流中）会撑起父元素的高度,咱们把Box3的浮动影响清除便可.
这样能够解决问题，可是咱们手动添加了这样一个box3 形成页面布局增长了(不推荐)。
此时咱们能够考虑，使用css样式的伪元素选择器，在咱们的box1最后加上一个（块元素），使之在文档流中，并清除浮动元素对它的影响，那么咱们就
能够解决问题.
*/
float:left;
}html
/* 解决高度塌陷最终方案 */
.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>htm