应使用bfc隔离浮动而非clear清除：将浮动元素及其邻近内联内容包裹在display: flow-root或overflow: hidden容器中，使后续段落自然脱离浮动影响，避免父容器塌陷与语义混乱。
浮动元素后段落仍被文字环绕，怎么让它独占一行
直接给后续 <p></p> 加 clear: both 是最常见错误——它只让这个 <p></p> 自己避开前面浮动，但无法修复父容器塌陷，且语义混乱。真正要解决的是“文字环绕”这个视觉现象，核心不是“清除”，而是隔离。
- 浮动元素（如
img）脱离文档流，但仍在行框内参与排版，所以紧邻的文本会绕排 - 只要后续块级元素没创建独立上下文，就还会受浮动影响，哪怕它看起来“换行”了
- 正确做法是把浮动元素和它紧邻的内联内容（比如头像+用户名+简介）一起包进一个触发 BFC 的容器里
推荐写法：.wrap { overflow: hidden; } 或更现代的 .wrap { display: flow-root; }。前者兼容 IE8+，后者语义清晰、无裁剪风险，Chrome 64+/Firefox 58+/Safari 15.4+ 支持。
为什么 clear: both 加在浮动元素自己身上没用
clear: both 不是“取消浮动”，而是告诉浏览器：“我的外边距不能和前面任何浮动元素重叠”。它只对当前元素生效，且前提是该元素是块级、在文档流中。
-
<div style="float: left; clear: both"></div>：这个元素自己已脱离文档流，“clear”失去作用对象，等同于没写 -
<div class="parent"><div style="float: left"></div></div>：给.parent加clear: both无效，因为clear不作用于子元素 - 唯一有效位置：浮动元素的**下一个兄弟块级元素**，且必须是普通流中的块级元素（
<div>、<code><p></p>等）图文混排时如何避免第三段文字还被挤偏
典型场景：左浮动头像 + 两行文字（昵称 + 简介）+ 第三段独立说明文字。前两段因与浮动同在一个 BFC 内，会被绕排；第三段若没隔离，仍可能被“余波”影响，尤其当父容器没设宽或高度计算异常时。
- 不要给每个
<p></p>单独加overflow: hidden，成本高且不可维护 - 把头像和前两段文字包进一个
<div class="profile">，并设 <code>display: flow-root - 第三段
<p></p>放在这个容器外面，自然脱离浮动影响范围 - 如果必须兼容老浏览器（如 IE11），用
overflow: hidden替代，但要确认里面没有position: absolute溢出内容 - Flexbox 适合一维排列（横向/纵向），
display: flex一行就能替代整套浮动逻辑 - Grid 适合二维布局（行列交织），
display: grid配合grid-template-columns直接定义结构 - 唯一合理保留
float的场景：纯图文混排，比如文章里的插图 + 旁边说明文字，且不需要精确控制列数或响应式断点
现代项目里还该不该用
float做布局不该。浮动不是布局工具，是图文环绕方案。2026 年还在用
float做多栏、导航、卡片网格，等于主动引入塌陷、清除、宽度计算、响应式断裂等一系列已知问题。真正难的不是写出能“跑起来”的浮动代码，而是判断什么时候该停手、换方案——尤其当发现要反复加
clearfix、调margin、查塌陷原因时，那往往就是该重构的信号。 - 不要给每个
