一. 父盒的高度塌陷概念
在CSS中，当父元素的高度没有明确指定时，其高度由子盒撑开。若子盒全部浮走，则高度塌陷为0。
实验一
父盒高度为0的初始排列
<style>
article{
/* 给父盒设置宽度和背景 */
width: 1000px;
/* height: 600px; */
background-color: gray;
}
#div1{
width: 100px;
height: 100px;
background-color: red;
}
#div2{
width: 100px;
height: 100px;
background-color: blue;
}
#div3{
width: 100px;
height: 150px;
background-color: green;
}
#div4{
width: 100px;
height: 30px;
background-color: pink;
}
#div5{
width: 300px;
/* border: 3px rgba(0, 191, 255, 0.84) solid; */
background-color: yellow;
}
footer{
width: 1000px;
height: 50px;
background-color:purple;
}
</style>
</head>
<body>
<!-- 父盒 -->
<article>
<div id="div1">盒子1</div>
<div id="div2">盒子2</div>
<div id="div3">盒子3</div>
<div id="div4">盒子4</div>
</article>
<footer>
页脚
</footer>
</body>这是一个高度为0的父盒，我们现在所看到的父盒高度是由于父盒内的4个子盒所撑起来的高度。
将盒子1左浮动
#div1{
width: 100px;
height: 100px;
background-color: red;
float: left;
}本例中，由于盒子1左浮动，盒子2向上填补盒子1的位置，可以看到父盒的高度塌陷了。
将盒子2左浮动
#div2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}盒子2左浮动，此时在盒子1下的盒子2向右移动，其余盒子向上填补位置 ，由于盒子3高度较高，我们可以看到，盒子3被盒子1覆盖注了。这时父盒的高度由盒子3盒子4撑起来。
将盒子3高度改变并左浮动
#div3{
width: 100px;
height: 100px;
background-color: green;
float: left;
}盒子3的高度改变，并向左浮动，而盒子4被盒子1覆盖住。这时父盒的高度由盒子4撑起来
将盒子4左浮动
#div4{
width: 100px;
height: 30px;
background-color: pink;
float: left;
}由于盒子4的左浮动，父盒完全塌陷
以上就是关于父盒的高度塌陷的问题
如何解决 父盒的高度塌陷的问题呢？
1. 最简单的解决方法是"为父盒设置高度"
2. 清除浮动
二. 清除浮动
概念：为当前盒子设置一个clear属性，清除前面盒子浮动对它的影响。
1.left 清除前面盒子左浮动的影响；
2.righ 清除前面盒子右浮动的影响；
3.both 清除前面盒子浮动的影响（不管是左浮动还是右浮动）；
4. none 允许两边都有浮动对象
作用：可以解决高度塌陷和文字环绕带来的影响。
clear：left /righ /both / none
实验二
清除浮动影响
#div5{
width: 997px;
border: 3px rgba(0, 191, 255, 0.84) solid;
background-color: yellow;
}
<div style="clear: both;" id="div5"></div>接着上一个实验继续，我们如何解决高度塌陷的问题呢？
在最后一个盒子4的后面，添加一个高度为0的盒子（真实元素或者伪元素均可），然后设置该盒子的clea属性，令该盒子“忽略”前面盒子4对其影响，从而拒绝向前递补盒子4文档流位置。 由于盒子4在文档流中的位置没有被侵占，故父盒仍旧被盒子4所撑开，不存在塌陷。
就这样父盒高度塌陷的问题解决啦
三 文字环绕
文字环绕演示
未清除浮动时的文字环绕
<style>
article{
/* 给父盒设置宽度和背景 */
width: 1000px;
/* height: 600px; */
background-color: gray;
}
#div1{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
#div2{
width: 100px;
height: 100px;
background-color: blue;
float: right;
}
#div3{
width: 100px;
height: 100px;
background-color: green;
float: left;
}
#div4{
width: 100px;
height: 30px;
background-color: pink;
float: right;
}
#div5{
width: 997px;
border: 3px rgba(0, 191, 255, 0.84) solid;
background-color: yellow;
}
footer{
width: 1000px;
height: 50px;
background-color:purple;
}
</style>
</head>
<body>
<!-- 父盒 -->
<article id="one">
<div id="div1">盒子1</div>
<div id="div2">盒子2</div>
<div id="div3">盒子3</div>
<div id="div4">盒子4</div>
<p>清除浮动演示文本；清除浮动演示文本；清除浮动演示文本；清除浮动演示文本；清除浮动演示文本；
清除浮动演示文本；清除浮动演示文本；清除浮动演示文本；清除浮动演示文本；清除浮动演示文本；
清除浮动演示文本；清除浮动演示文本；清除浮动演示文本；清除浮动演示文本；清除浮动演示文本；
清除浮动演示文本；
<div style="clear: both;" id="div5"></div>
</article>
<footer>
页脚
</footer>
</body>清除浮动后的文字环绕
#one p{
/* 设置容器中段落的样式 */
border: 2px black dashed;
background-color: aquamarine;
/* 清除浮动 */
clear: both;
}标签：浮动,盒子,width,--,100px,color,父盒,background,CSS From： https://blog.csdn.net/2301_82005922/article/details/143090876在对段落设置了clear：both; 清除浮动后，可以将段落之前的浮动全部清除，使段落按正常的文档流显示。