浮动图片后文字不环绕，主因是clear属性冲突或父容器触发BFC；应确保图片直处于文本流、避免overflow:hidden等BFC容器，并用margin而非padding控制环绕间距。
浮动图片后文字不环绕？检查 float 和 clear 是否冲突
浮动图片后文字不环绕，大概率是父容器或后续元素用了 clear: both，或者图片本身被包裹在设置了 display: block 或 overflow: hidden 的容器里，切断了文本流。浮动生效的前提是文字内容处于同一文档流中，且未被清除。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确认图片直接放在段落内，而非嵌套在
<div style="overflow:hidden">或<section>等“BFC 容器”中 - 检查紧随其后的元素（比如下一个
<p>）是否误加了clear: both—— 这会让它从下一行开始，文字自然就断了 - 给图片加
margin-right（右浮动时）或margin-left（左浮动时），避免文字贴边难读
文字环绕但间距失控？优先用 margin 而非 padding
浮动元素的 padding 不会推开周围文字，只有 margin 才真正参与外边距折叠和文本环绕计算。常见误区是给浮动图片加 padding: 10px 想留白，结果文字紧贴图片边缘。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 左浮动图片：设
float: left; margin-right: 16px; - 右浮动图片：设
float: right; margin-left: 16px; - 若需上下留空，对图片加
margin-top和margin-bottom，但注意可能影响行高对齐 - 避免对浮动图片设
vertical-align—— 它对float元素无效
响应式场景下浮动失效？配合 max-width 和媒体查询重置
小屏时，如果图片宽度超过容器，float 仍会生效，但文字可能被挤到下一行甚至“消失”在视口外。这不是浮动失效，而是布局溢出导致的视觉问题。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给浮动图片设
max-width: 100%; height: auto;，防止宽图撑破容器 - 在小屏断点（如
@media (max-width: 768px)）中取消浮动：float: none;，让图片独占一行 - 可选：同时设
margin: 0 auto; display: block;居中图片，避免左对齐突兀
现代替代方案要不要用？float 仍可靠，但复杂混排建议 display: flow-root 或 shape-outside
纯图文环绕需求，float 依然稳定、兼容性好（IE8+）。但如果要实现文字绕不规则图形（如圆形头像）、或需要精确控制多栏间隙，float 就力不从心了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 保持简单环绕：坚持用
float+margin，别为了“新”而换 - 需要文字绕椭圆/自定义轮廓：用
shape-outside: circle(50%)，但需搭配float且注意浏览器支持（Chrome/Firefox/Edge 17+） - 防父容器塌陷又不想用伪元素？
display: flow-root是更干净的替代，但 IE 完全不支持
浮动本身没过时，只是容易被用错位置——它本质是文本流的“借道机制”，不是通用布局工具。真正容易被忽略的是：一旦父容器触发 BFC（比如用了 overflow: hidden），浮动就只在该容器内生效，外部文字根本感知不到。
