float本质是图文环绕排版指令而非布局工具，它使元素脱离普通文档流、不参与父容器高度计算，但仍受包含块约束并参与行框排版，文字可自动绕行；clear仅控制自身上边界避开浮动元素，现代布局应优先使用flex或grid。
float 本质是排版指令，不是布局工具
因为 float 的设计目标从一开始就是图文环绕——比如让段落文字绕着一张右浮动的图片排列。它不是为了做两栏布局或网格对齐而存在的。浏览器执行 float: left 或 float: right 时，会按 CSS 2.1 规范明确把该元素“注销”出普通文档流（normal flow），这不是 bug，是行为定义。
这意味着：它不再参与父容器的高度计算，也不占位后续块级元素；但它仍留在包含块内，受 margin/padding/border 约束，并继续参与行内格式化上下文（IFC），所以文字能绕它排。
脱离文档流的典型表现有哪些
这些现象不是偶然出错，而是规范行为的直接反馈：
- 父容器高度为
0px，背景色、边框消失 - 紧随其后的
<div>从顶部开始渲染，视觉上和浮动元素重叠 - 段落文字被右浮动图片“切掉开头”，但内容没被挡住——只因每行的
line-box自动绕开浮动边界
clear 不是“清除 float”，只是控制自身位置
clear 从不改变已浮动元素的状态，它只告诉当前元素：“你的上边界，必须低于指定方向所有浮动元素的 bottom”。常见误用包括：
立即学习“前端免费学习笔记（深入）”；
- 给父容器加
clear: both→ 完全无效，clear对自身不起作用 - 给
display: inline元素设clear→ 不生效，只对块级元素有效 - 写
clear: left却想避开右浮动 → 无效，方向必须匹配
现代开发中该不该用 float
如果目标是多列布局、响应式栅格或对齐控制，display: flex 或 display: grid 是更合理的选择：它们天然不脱离文档流，父容器高度自动包含子项，没有塌陷问题。
只有以下场景才需保留 float 并配套处理：
- 需要文字环绕图片/图标（如文章详情页）
- 维护老项目且无法升级布局方式
- 打印样式中依赖 float 实现分栏
即便用了 display: flow-root 或伪元素清除，也改变不了 float 的语义本质——它始终是为排版服务的。这点容易被忽略，但决定了你该不该用它。
