浮动导致父容器高度塌陷，文字被图片“顶开”，根本原因是浮动元素脱离文档流；推荐用display: flow-root创建BFC来解决，兼容现代浏览器，或退而采用伪元素清除法；优先考虑Flex/Grid替代浮动，避免副作用。
浮动导致父容器高度塌陷，文字被图片“顶开”
这是最常见现象：<img> 设置了 float: left，后面紧跟的 <p> 文字看似在下方，实际却紧贴图片右侧——因为父容器没包裹住浮动元素，高度为 0，文字按正常流从“顶部”开始排布，视觉上就和图片错位了。
根本原因不是图片或文字本身写错了，而是浮动脱离文档流后，父容器无法自动撑高。解决方向只有一个：让父容器“感知”到浮动子元素的存在。
- 别用
clear: both加在文字标签上——这只能把文字强行换行，不解决父容器塌陷，后续新增内容仍会错乱 - 避免给父容器写死
height或min-height——响应式场景下极易失效 - 优先用
display: flow-root（现代方案），兼容性够用（Chrome 64+/Firefox 58+/Safari 12.1+）
用 display: flow-root 清除浮动最稳妥
它让容器建立新的 BFC（块级格式化上下文），BFC 区域内浮动元素会被包含，父容器自然撑开高度，内部文字恢复按正常流排列。
.container {
display: flow-root;
}
<p>.container img {
float: left;
margin-right: 12px;
}这个方案不污染 HTML 结构，不增加冗余标签，也不影响子元素的 margin 合并行为。比老式 clearfix 更轻量、语义更清晰。
立即学习“前端免费学习笔记（深入）”；
如果必须支持 IE，再退回到伪元素清除法，但注意：::after 必须设 content: "" + display: table（或 block）+ clear: both，三者缺一不可。
overflow: hidden 能用但有隐藏风险
给父容器加 overflow: hidden 也能触发 BFC，从而包含浮动。但它本质是裁剪溢出内容，一旦内部有 position: absolute 元素超出容器边界，或用了 transform 位移，就会被意外截断。
- 适合内容完全可控、无绝对定位/动画的简单模块
- 不适合弹层、下拉菜单、带阴影或偏移的卡片等场景
- 移动端 Safari 对
overflow: hidden在某些 zoom 场景下有渲染 bug
图片文字混排时，优先考虑 Flex 或 Grid 替代浮动
浮动本就不是为图文混排设计的布局工具，它属于早期 hack 手段。现在用 display: flex 配合 align-items: flex-start 和 gap，能更精准控制对齐与间距：
.article-content {
display: flex;
align-items: flex-start;
gap: 12px;
}
<p>.article-content img {
flex: 0 0 auto; /<em> 不放大不缩小，保持原尺寸 </em>/
}</p><p>.article-content p {
flex: 1; /<em> 文字占满剩余空间 </em>/
}这种写法天然规避浮动所有副作用，响应式也更容易——比如小屏下改 flex-direction: column 就能竖排。只有当需要兼容非常老的浏览器（如 IE9 及以下）时，才需回头处理浮动问题。
真正容易被忽略的是：很多错位问题其实源于图片没有设置 vertical-align，导致基线对齐异常，看起来像“错位”，实则和浮动无关。遇到疑似问题，先检查 img { vertical-align: top } 是否缺失。
