今天来讲讲float导致的父元素高度塌陷的解决方法。 之前讲过absolute导致的高度塌陷问题，需要的同学请移步至此文章：添加链接描述
什么是高度塌陷？ 在文档流中，当父元素的高度设置为自适应的时候（height：auto），此时父元素的高度默认会被子元素撑开。但是当为我们子元素设置浮动（float）以后，子元素就会完全脱离文档流，导致子元素无法撑开父元素高度的情况出现。
高度塌陷会出现什么问题？ 由于父元素的高度塌陷，则父元素下的所有元素都会向上移动，从而导致页面的布局混乱。
接下来看一个float导致父元素高度塌陷的小例子👇 正常代码：
<html> <head> <style> .container{ width: 300px; height: auto; background: rgb(54, 181, 219); position: relative; } .box{ width: 200px; height: 200px; border: 2px solid rgb(247, 129, 129); } </style> </head> <body> <div class="container" > <div class="box"></div> </div> </body> </html>代码结果：父元素(蓝色背景）高度被子元素（红色边框）高度撑起 问题出现：当给子元素box添加了 float：left；属性后。 结果：原本为蓝色背景的父元素container高度发生了塌陷变成0。
那么高度塌陷问题该怎么解决呢？接着看👇
常见的高度塌陷问题的解决方法
给父元素添加固定高度。 （缺点：添加了固定高度的父元素高度不再自适应）给父元素添加属性overflow: hidden; （缺点：当子元素有定位属性时,容器以外的部分会被裁剪掉)在子元素的末尾添加一个高度为0的空白 div来清除浮动属性。 （缺点：在页面中添加无意义的div会造成代码冗余） //代码结构如下 <body> <div class="father" > <div class="son"></div> //清除浮动属性的div <div style="clear: both;"></div> </div> </body> 给父元素中添加一个伪元素。 .父元素:after{ content: ""; height: 0; clear: both; overflow: hidden; display: block; visibility: hidden; }