高度塌陷由子元素脱离文档流导致，解决方法包括：1. 使用clearfix类通过伪元素清除浮动；2. 触发父元素BFC，如设置display: flow-root或overflow: hidden；3. 采用flex或grid布局，自动包裹子元素；4. 避免使用固定高度。推荐优先使用display: flow-root或现代布局方式。
在CSS盒模型中，高度塌陷通常发生在父元素没有设定固定高度，而子元素使用浮动（float）或绝对定位脱离文档流时，导致父元素无法正确包裹子元素，看起来像是“塌陷”了。解决这个问题有几种常用方法。
1. 使用clearfix清除浮动
这是最常见也最兼容的解决方案，适用于子元素使用了 float 的情况。
给父容器添加一个clearfix类，通过伪元素触发BFC（块级格式化上下文）来包含浮动元素。
示例代码：.clearfix::after {
content: "";
display: table;
clear: both;
}
将这个类应用到父元素上，就能防止高度塌陷。
立即学习“前端免费学习笔记（深入）”；
2. 触发父元素BFC（块级格式化上下文）
BFC元素会包含其内部所有子元素，包括浮动元素。可以通过以下任意一种方式让父元素形成BFC：
- 设置 overflow: hidden 或 overflow: auto
- 设置 display: flow-root（现代推荐写法）
- 设置 float: left/right
- 设置 position: absolute/fixed
- 使用 display: inline-block 或 flex/grid
.parent {
display: flow-root; /* 清洁、语义明确，不产生副作用 */
}
3. 使用Flex或Grid布局替代浮动
现代布局中，建议用 flexbox 或 grid 替代浮动布局，它们天然解决了高度塌陷问题。
示例：.parent {
display: flex;
}
.child {
flex: 1;
}
此时父元素会自动包裹子元素，无需额外处理。
4. 手动设置高度（不推荐）
虽然可以给父元素设置固定高度来避免视觉上的塌陷，但这缺乏弹性，不利于响应式设计，一般不推荐。
基本上就这些方法。最推荐的是使用 display: flow-root 或 flex/grid 布局，既简洁又现代。传统项目中可用clearfix。关键是理解塌陷成因——子元素脱离文档流，父元素失去内容支撑。
