浮动元素脱离文档流但文字绕排，因未设外边距导致“被挤压”；父容器塌陷致第二段下移；需用flow-root或clearfix修复；浮动元素应设margin-bottom并配合足够line-height防重叠。
浮动元素脱离文档流，但行内内容仍会绕排——段落文字被“挤压”，本质是它在绕排时没获得足够空间或上下文约束，不是浮动本身出错，而是布局上下文没配对。
浮动后段落文字为什么从图片底部开始、还贴得极近？
这是最典型的“被挤压”错觉。实际是 img 没设 margin-right（左浮）或 margin-left（右浮），文字环绕的是图片的外边框，而不是你期望的留白区域。
-
img默认是inline元素，部分浏览器下margin不生效，必须加display: block - 只写
margin: 12px会把margin-top和margin-bottom也带上，可能把图片顶出父容器，或撑开段落间距，破坏视觉节奏 - 推荐显式写：
margin-right: 16px; margin-bottom: 8px;（左浮场景）
第二段文字突然掉到图片正下方，和第一段表现不一致？
这不是文字的问题，是父容器高度塌陷了。第一段能绕，是因为它和 img 在同一父容器内；第二段已脱离该上下文，按正常文档流从“塌掉的父容器底部”重新起排。
- 检查父容器 computed height 是否为
0或远小于预期 - 现代写法：直接给父容器加
display: flow-root（Chrome 64+/Firefox 61+/Safari 15.4+） - 兼容旧版：用伪元素 clearfix：
.parent::after { content: ""; display: table; clear: both; } - 避免无脑用
overflow: hidden——它虽能触发 BFC，但可能裁剪position: absolute的下拉菜单、阴影等溢出内容
文字首行“钻”到浮动块底下，甚至和标题重叠？
根本原因是浮动元素参与行框（line box）构建，却不占据行高，而文字容器又没设足够 line-height 或浮动元素缺 margin-bottom，导致行框被压缩。
- 给浮动元素加
margin-bottom: 0.5em，为文字行框留缓冲 - 文字容器设
line-height: 1.6或更高，确保单行有足够高度包容浮动块自然下沉 - 别对浮动元素设
vertical-align——它对float无效，且易干扰判断 - 用开发者工具看 Layout 面板里的
Offset Top/Left和Containing Block，比只看 Styles 更准
真正容易被忽略的，是那个“看似正常”的段落容器，其实根本没进入浮动影响的环绕上下文——它既没触发 BFC，也没和浮动元素共处同一父级，更没预留物理间距。绕排不是自动发生的魔法，而是一连串 DOM 结构、CSS 规则和渲染上下文共同作用的结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
