父容器高度塌陷可通过多种CSS方法解决。1. 使用clear属性配合额外标签可清除浮动，但增加无语义元素，不推荐现代开发。2. 触发BFC能有效包含浮动子元素，推荐使用display: flow-root，无副作用且干净。3. 利用.parent::after伪元素清除浮动，无需额外标签，兼容性好，适合老项目。4. 采用flex或grid布局替代浮动，父容器自动包裹内容，结构清晰，避免塌陷。推荐优先使用display: flow-root或flex/grid布局，符合现代CSS实践。
父容器高度塌陷通常发生在子元素使用浮动或绝对定位时，导致父元素无法正确包裹子元素。解决这个问题的关键是让父容器能够“感知”子元素的高度。以下是几种常用的CSS方法来避免高度塌陷。
1. 使用 clear 属性配合额外标签
这是传统方法，适用于使用了 float 的子元素。在最后一个子元素后添加一个清除浮动的元素：
然后定义 clear 类：
.clear {
clear: both;
}
这种方法有效但会增加无语义的HTML标签，不推荐现代开发中使用。
立即学习“前端免费学习笔记（深入）”；
2. 触发BFC（块级格式化上下文）
BFC元素能包含其内部的浮动元素。通过以下任意一种方式触发父容器的BFC：
- overflow: hidden 或 auto
- display: flow-root（推荐）
- float: left/right
- position: absolute/fixed
最干净的方法是使用 display: flow-root：
.parent {
display: flow-root;
}
它专门用于创建无副作用的BFC，不会裁剪内容或引入滚动条。
3. 使用伪元素清除浮动
无需添加额外HTML标签，利用 ::after 伪元素实现清除：
.parent::after {
content: "";
display: block;
clear: both;
}
这是兼容性好且广泛使用的方案，尤其适合维护老项目。
4. Flex 或 Grid 布局代替浮动
现代布局方式天然避免高度塌陷问题。将父容器设为 flex 或 grid 容器即可：
.parent {
display: flex;
}
/ 或 /
.parent {
display: grid;
}
子元素不再需要浮动，父容器自动包裹内容，结构更清晰。
基本上就这些。推荐优先使用 display: flow-root 或切换到 flex/grid 布局，既简洁又符合现代CSS实践。
