浮动元素必须设width且文本须在其后，否则多行环绕失效；文字只绕第一行就下沉是因父容器塌陷导致的视觉错觉，实为文字持续环绕但容器未兜住浮动元素。
浮动元素必须设 width，且文本必须在 HTML 中位于其后，否则多行环绕会失效。
为什么 float:left 后文字只绕第一行就下沉？
这不是 bug，是浮动脱离文档流后，父容器高度塌陷导致的视觉错觉。文字其实一直在环绕，但父容器没“兜住”浮动元素，后续段落从顶部开始渲染，看起来像断开了。
- 浮动元素未设置
width：浏览器无法计算可环绕空间，可能默认撑满或收缩异常 - 文本不在浮动元素之后：HTML 结构中
<p>写在<img>前面，文字不会主动“找”浮动元素去绕 - 父容器没触发 BFC：比如没设
overflow: hidden或display: flow-root，高度塌陷后下一段落直接顶上来
float + width 控制环绕空间的关键参数
width 不只是让图片变小，它决定了文字能“挤”进去的横向余量。太宽，文字没地方排；太窄，又浪费空间。
-
width建议用固定值（如150px）或相对单位（如25%），避免100%或auto -
margin-right（左浮时）或margin-left（右浮时）必须设，否则文字紧贴边框，可读性差 - 配合
margin-bottom防止下一段落文字“钻”到浮动元素底部空隙里
clear 和 BFC 哪种清除方式更稳？
两者目的相同，但触发机制和兼容性不同。现代项目优先用 BFC，老项目维护时 clear 更直白。
立即学习“前端免费学习笔记（深入）”；
-
clear: both加在下一个块级元素上，简单但需额外 DOM 节点，容易漏加 -
overflow: hidden作用于父容器，一劳永逸，但可能意外裁剪阴影或下拉菜单 -
display: flow-root是目前最干净的 BFC 触发方式，Chrome 64+、Firefox 59+ 支持，无副作用
真正容易被忽略的是：浮动环绕本质是「单方向流式排版」，不是「智能路径填充」。它只认左/右边界和当前行高，不理解语义、不响应字体缩放、也不适配 flex 容器内的子项。一旦混用现代布局，反而更难调试。
