浮动使缩略图脱离文档流导致父容器塌陷，标题因此错位；解决关键是让父容器包裹浮动元素，可用overflow:hidden触发BFC或改用flex布局。
浮动元素脱离文档流，会导致后续块级元素（比如标题）无法与它对齐——这不是样式没写对，是布局机制本身决定的。
为什么 float 会让标题“掉下来”？
当你对缩略图（比如 <img alt="如何修复CSS浮动后标题和缩略图不在一行的问题？" >）设置 float: left，它就脱离了普通流，父容器高度塌陷；而标题默认是块级元素，会从新起一行开始渲染，自然就和缩略图错开了。
常见错误现象：h2 或 h3 出现在缩略图下方，即使 HTML 中它写在缩略图前面；检查 computed styles 会发现父容器高度为 0 或远小于预期。
- 不是 CSS 优先级问题，加
!important没用 - 不是浏览器兼容性问题，所有现代浏览器行为一致
- 真正要解决的是“父容器如何包裹浮动子元素”
用 overflow: hidden 触发 BFC 是最简方案
给缩略图和标题的共同父容器（比如 <div class="item">）加 <code>overflow: hidden（或 auto），就能让父容器重新包含浮动子项，标题就能和缩略图在同一行内正常排布。
立即学习“前端免费学习笔记（深入）”；
示例：
.item {
overflow: hidden; /* 关键 */
}
.item img {
float: left;
width: 80px;
height: 60px;
}
.item h3 {
margin: 0 0 0 10px; /* 避免紧贴缩略图 */
line-height: 60px; /* 垂直居中对齐 */
}- 不要用
overflow: visible（默认值），它不触发 BFC - 慎用
overflow: scroll，可能意外出现滚动条 - 如果父容器本身需要溢出内容可见，这个方案就不适用，得换方法
更现代的做法：用 display: flex 替代 float
如果你不需要支持 IE9 及更早版本，直接放弃 float，改用 Flex 布局——语义清晰、无塌陷、控制力强。
示例：
.item {
display: flex;
align-items: center; /* 垂直居中 */
}
.item img {
width: 80px;
height: 60px;
margin-right: 10px;
}
.item h3 {
margin: 0;
flex: 1; /* 让标题占满剩余空间 */
}-
float是为图文混排设计的，不是为 UI 布局；强行用它做结构容易踩坑 - Flex 下无需清除浮动，也不存在父容器塌陷
- 注意
flex: 1和flex-grow: 1效果等价，但前者更简洁
清除浮动（clear）只适合特定场景
如果你必须保留 float（比如老项目不能动结构），且标题是浮动后的第一个块级兄弟元素，可以在标题上加 clear: both ——但这会让标题“强制换行”，反而加剧错位，所以通常不该这么干。
真正该加 clear 的地方，是在浮动元素之后、需要另起一行的内容前（比如分隔线、按钮组），而不是标题本身。
- 错误写法：
h3 { clear: both; }→ 标题一定掉到下一行 - 正确思路：用
::after清除父容器浮动（即 clearfix），而不是清理标题 - clearfix 的核心是：
.item::after { content: ""; display: table; clear: both; }
真正卡住人的，往往不是“怎么让标题上去”，而是没意识到 float 已经让父容器“看不见”缩略图了——修复的关键永远在父容器，不在标题样式本身。
