当 div 内含 float: left 的图片时，其默认 display: block 无法自动撑开高度包裹浮动内容；改为 display: inline-block 后，容器能正确计算浮动元素高度并自适应——本文详解原理与更现代、可靠的解决方案。
当 `div` 内含 `float: left` 的图片时，其默认 `display: block` 无法自动撑开高度包裹浮动内容；改为 `display: inline-block` 后，容器能正确计算浮动元素高度并自适应——本文详解原理与更现代、可靠的解决方案。
在 CSS 布局中，div 默认为 display: block，本应自然包裹内部内容并形成“BFC（块级格式化上下文）”，但一旦子元素使用 float，问题便随之而来：浮动元素脱离正常文档流，父级 block 容器在计算高度时会“视而不见”，导致高度塌陷（height collapse）——即容器高度仅由非浮动内容（如文字行高）决定，图片从底部溢出，背景色/边框无法完整覆盖。
你观察到将 .header2 设为 display: inline-block 后问题消失，这并非巧合，而是源于 inline-block 的混合特性：
- ✅ 具备块级特性：可设置宽高、内外边距，支持垂直对齐；
- ✅ 具备内联特性：其包含块（containing block）会参与行盒（line box）的高度计算，而浮动元素虽脱离文档流，却仍会影响行盒的基线和高度；因此
inline-block容器会“感知”到浮动图片所占据的行盒空间，从而扩展自身高度以包裹它。
⚠️ 但需注意：inline-block 并非推荐解法——它引入了内联元素固有的间隙（如换行符、空格生成的 font-size 相关空白），且语义上不适用于标题区块这类结构性容器，易引发维护隐患。
✅ 推荐方案：现代、语义化、无副作用
1. 触发 BFC（最简洁可靠）
.header2 {
background-image: linear-gradient(to bottom, black 82%, blue);
/* 关键：创建独立的块级格式化上下文 */
overflow: hidden; /* 或 overflow: auto; 或 display: flow-root; */
/* 其余样式保持不变 */
}
✅ overflow: hidden（或 auto）是最广泛兼容的 BFC 触发方式，强制容器包含所有浮动后代，无需改变显示模式，零副作用。
? 更优选择（现代浏览器）：
display: flow-root—— 专为解决此问题设计，语义清晰、无任何副作用，Chrome 58+/Firefox 53+/Safari 15.4+ 已全面支持。
2. Flex 布局（语义与控制兼得）
.header2 {
display: flex;
align-items: flex-start; /* 防止文字基线对齐导致错位 */
gap: 16px; /* 替代 float 的间距控制 */
}
.header2 img.logo2 {
float: none; /* 移除 float！flex 下无需浮动 */
width: 200px;
height: 180px;
margin: 0;
}
.header2 h2,
.header2 p {
margin: 0;
/* 文字内容自然流式排列 */
}
✅ Flex 不仅彻底规避浮动塌陷，还提供精准对齐、响应式伸缩能力，是当前布局首选。
3. 伪元素清除法（兼容性最强，适合旧项目）
.header2::after {
content: "";
display: table;
clear: both;
}
✅ 经典 clearfix，兼容 IE8+，无视觉副作用，适合需支持老旧浏览器的场景。
⚠️ 注意事项总结
- ❌ 避免依赖
inline-block解决浮动塌陷——它掩盖了布局逻辑缺陷，且可能引发水平间隙、垂直对齐异常等问题； - ✅ 优先选用
display: flow-root（语义最优）或overflow: hidden（兼容性最优）； - ✅ 新项目强烈建议用 Flex 或 Grid 替代
float布局，从根本上消除塌陷风险； - ? 调试技巧：在开发者工具中勾选“Show layout shifts”或临时添加
outline: 1px solid red到父容器，直观验证高度是否真正包裹内容。
掌握这一机制，不仅解决图片容器留白，更是理解 CSS 浮动、BFC 与布局模型的关键入口。
