父元素包含浮动子元素时因脱离文档流导致高度塌陷，解决方法包括使用::after伪类清除浮动、设置overflow触发BFC，或采用Flex/Grid等现代布局方式避免问题。
浮动元素会影响父元素的高度计算，通常会导致父元素无法正确“包裹”子元素，出现高度塌陷问题。这是因为浮动元素脱离了正常的文档流，父元素在计算高度时“看不到”这些子元素。
浮动元素导致高度塌陷
当一个父元素只包含浮动的子元素时，父元素可能会显示为高度为0，即使子元素实际存在并占据空间。
例如：
此时，.parent 的高度可能为0，因为它没有非浮动内容，也无法感知浮动子元素的高度。
立即学习“前端免费学习笔记（深入）”；
解决方法：清除浮动
为了让父元素正确包含浮动子元素，需要使用“清除浮动”的技术。
- 使用伪类 ::after 清除浮动：最常见且推荐的方法。
.parent::after {
content: "";
display: block;
clear: both;
}
这样会在父元素内部末尾插入一个清除浮动的块级元素，迫使父元素延伸包含所有浮动子元素。
- 设置父元素 overflow 属性：触发BFC（块级格式化上下文）。
.parent {
overflow: hidden; /* 或 auto */
}
这种方法也能让父元素形成独立的布局环境，从而包含浮动子元素，但要注意可能裁剪溢出内容。
- 给父元素设置固定高度或 inline-block：不灵活，一般不推荐。
CSS Flex 或 Grid 布局替代方案
现代开发中，建议使用更强大的布局方式替代浮动。
例如使用 Flex：
.parent {
display: flex;
}
.child {
width: 100px;
height: 100px;
background: red;
}
Flex布局天然不会产生浮动带来的高度塌陷问题，且更易控制对齐和分布。
基本上就这些。浮动虽曾是布局主力，但现在更推荐用现代方法处理布局，避免这类兼容性和结构问题。
