加了float: left文字仍从下一行开始，是因为浮动只影响后续行内内容排布，对紧随其后的块级元素（如<p>）无效；需确保图文同属一个父容器、图片设明确宽高、正确添加margin-right/margin-bottom，并用overflow: hidden或display: flow-root防止父容器塌陷。
直接用 float 就能实现文字环绕图片，但绝大多数问题不是 float 没写对，而是后续布局没管住——文字掉到图下面、间距失控、多段错位、响应式后全乱，根源都在浮动脱离文档流后的“善后”没做。
为什么加了 float: left 文字还是从下一行开始？
这不是 CSS 失效，而是浏览器按规范在执行：浮动只影响**后续行内内容**的排布，对已存在的块级元素（比如紧跟着的 <p>）无效。常见触发场景：
- 图片和文字不在同一个父容器里——必须同级或至少共用一个
<div>包裹 - 文字被包在另一个
<p>或<div>里，且该容器没触发 BFC（比如没设overflow: hidden或display: flow-root） - 图片没设明确
width，尤其在 Flex/Grid 容器中，float行为会异常 - 父容器有
overflow: hidden但高度太小，把浮动区域裁掉了
margin 必须加在图片上，而不是文字容器上
文字是行内流，它只响应浮动元素自身的 margin，不响应父容器的边距。设错位置，等于白调。
- 左浮动图片：加
margin-right控制右侧文字距离（推荐12px–20px或0.8em–1em） - 右浮动图片：加
margin-left，别反了 - 一定要加
margin-bottom（比如12px），否则下一段<p>会顶到图片底部，留出大片空白 - 避免用
margin: 10px这类简写——上下 margin 可能让相邻段落被意外“顶开”
浮动之后，怎么防止父容器塌陷、文字跑偏？
浮动元素脱离文档流，父容器若没高度约束，就会塌成一条线，后续内容从顶部重排，视觉上就是“文字掉下来了”。清除方式要选对：
立即学习“前端免费学习笔记（深入）”；
- 最稳妥：给父容器加
overflow: auto或overflow: hidden（兼容 IE8+） - 更现代：用
display: flow-root（Chrome 64+/Firefox 58+ 支持，语义清晰） - 伪元素清除法：
.container::after { content: ""; display: table; clear: both; }——漏掉content: ""或display: table都无效 - 别用
clear: both直接加在文字<p>上，它会强制整段换行，破坏环绕
响应式下 float 突然失效，怎么办？
小屏时硬撑 float 很容易让文字挤成窄列，可读性崩坏；而且媒体查询里漏掉某条 margin 或 clear，整个图文关系就断了。
- 建议在
@media (max-width: 768px)中直接移除所有浮动相关样式：float: none、clear: none、shape-outside: none - 改用
display: block; margin: 0 auto;让图片居中独占一行，文字自然上下排列 - 如果必须保留环绕（比如长文首屏），优先试
shape-outside: circle()，但它必须配合float才生效，且 Safari 对polygon()支持不稳定
真正难的不是写出那两行 float 和 margin，而是判断什么时候该坚持浮动、什么时候该果断放弃——图文语义顺序、屏幕阅读器朗读流、缩放后 margin 是否还合理，这些没法靠 DevTools 看出来，得靠结构验证和真机边界测试。
