浮动图片导致文本错位的解决方法是：让父容器感知浮动高度或阻止文本环绕；推荐用display: flow-root触发BFC，语义清晰无副作用，兼容现代浏览器；需兼容IE时才用overflow: hidden。
浮动图片导致文本错位怎么办
浮动元素会脱离文档流，父容器高度塌陷，后续文本直接“穿”进浮动区域，这是最典型的视觉错乱。解决思路只有两个：要么让父容器感知到浮动内容的高度，要么阻止文本环绕浮动元素。
clear: both 能不能直接用在文本上
可以，但不推荐。给紧随浮动图片之后的段落加 clear: both，确实能把它“推”到浮动下方，但前提是必须精确控制 HTML 顺序，且无法应对多图混排、响应式换行等场景。更麻烦的是，一旦图片被移除或顺序调整，clear 就成了冗余甚至破坏布局的代码。
overflow: hidden 为什么常被用来包裹浮动
给图片的父容器（比如 <div class="img-wrap">）设置 overflow: hidden 或 overflow: auto，能触发 BFC（块级格式化上下文），使容器重新包含浮动子元素，从而撑开自身高度。这是最轻量、兼容性好（IE6+）的做法。
注意点：
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 不要滥用在有真实溢出需求的容器上（比如带横向滚动的画廊），否则会截断内容
- 在 Flex 或 Grid 布局中无需此操作，它们天然形成新 BFC
- 现代项目中更倾向用
display: flow-root替代，语义更清晰且无副作用
为什么 display: flow-root 是更干净的解法
display: flow-root 是专为“创建无副作用的 BFC 容器”而生的属性，它既能让父容器包裹浮动子项，又不会像 overflow: hidden 那样意外隐藏溢出内容或影响滚动行为。
用法示例：
.img-container {
display: flow-root;
}
.img-container img {
float: left;
margin-right: 12px;
}
这个写法在 Chrome 58+、Firefox 53+、Safari 10.1+ 和 Edge 79+ 中都支持。如果需要兼容 IE，才退回 overflow: hidden 或伪元素清除法。
真正容易被忽略的是：清除浮动不是目的，让布局可预测、可维护才是。一旦用了浮动，就得同步处理它的“逃逸”效应；而更现代的方案（如 float + flow-root 组合，或直接改用 inline-block / flex）往往比死磕清除技巧更省心。
