CSS高度塌陷
图片
CSS高度塌陷是指在网页布局中，父元素没有正确地根据其浮动子元素的高度进行扩展，从而表现为父元素的高度未能包裹住浮动子元素的现象。
通常表现为父元素高度变为0，或者比实际应该表现的高度要矮。这个问题主要发生在以下情况：
- 1. 当子元素设置为浮动（float: left 或 float: right）时，它们会脱离正常的文档流，不再影响父元素的高度计算。
- 2. 父元素本身没有明确设置固定的高度，而是期望根据其内容（即子元素）自适应高度。
解决CSS高度塌陷的方法
- 1. 清除浮动（Clearfix）：
• 使用伪元素清除浮动（.clearfix 类样式）：
.clearfix::after {
content: "";
display: block;
clear: both;
}• 或者直接在父元素下方添加一个空的、clear属性设置为both的元素。
- 2. 设置 overflow 属性：
• 为父元素设置 overflow 属性为 auto 或 hidden 可以创建一个新的块格式化上下文（Block Formatting Context, BFC），这使得父元素能够包容其浮动子元素的高度。
.parent {
overflow: auto; /* 或 hidden */
}3. Flexbox布局：
- 使用 Flexbox 布局可以更方便地处理此类问题，因为它会自动计算容器的高度来适应子元素的高度。
.parent {
display: flex;
}4. Grid布局：
- CSS Grid布局也能够自然地适应其内容的高度，无需额外处理浮动带来的高度塌陷问题。
5. 使用 display: inline-block 或 position: relative/absolute：
- 虽然不是针对浮动引发的高度塌陷的直接解决方案，但在特定布局下通过改变元素的显示模式也能达到相同效果。
总之，处理高度塌陷的核心是确保父元素能够感知到其浮动子元素的高度，或者采用现代布局方式（如Flexbox或Grid）重新构建布局以避免浮动带来的问题。
