float元素“看不见”块级流但“拦得住”文字，因其退出块级格式化上下文（BFC）却不脱离行内格式化上下文（IFC），块级元素无视其存在而文字逐行绕排；clear仅约束自身位置，不回收浮动；父容器塌陷是CSS规范行为，display: flow-root可触发BFC修复。
float 元素为什么“看不见”块级流，却“拦得住”文字
因为 float 的设计目标从来就不是布局容器，而是图文混排——它让元素从块级格式化上下文（BFC）中退出，但继续留在行内格式化上下文（IFC）里参与行框（line box）的排布计算。
浏览器渲染时，会把页面内容拆成两套独立的“流”：一块是块级元素按顺序堆叠的 普通文档流，另一块是文字、<img alt="为什么在CSS中设置float后元素脱离普通流却未脱离文本流" > 等行内内容逐行折行的 文本流。float 不是“部分脱离”，而是明确地：退出前者，留下后者。
-
float: left后，块级兄弟元素会无视它原来的位置，直接从顶部开始渲染（造成父容器塌陷、后续元素上移） - 但同一段落里的文字，每一行都会检查当前浮动元素的边界，动态缩窄可用宽度，形成环绕效果
- 这种“对块级隐身、对文字显形”的行为，是 CSS 2.1 规范写死的，不是浏览器 bug
clear 属性只影响自身，不回收 float 元素
clear 常被误认为是“清除浮动”，其实它只是给当前元素加一条定位约束：它的上边界必须低于指定方向所有浮动元素的 bottom 边缘。
它不会让已浮动的元素回归文档流，也不会改变父容器的高度计算逻辑。
立即学习“前端免费学习笔记（深入）”；
-
clear: both→ 当前元素必须下移到所有float: left和float: right元素下方 -
clear: left对float: right元素完全无效 -
clear对display: inline元素不起作用，只对块级元素生效 - 父容器高度仍为 0，因为
clear没碰过它的高度计算规则
父容器塌陷的根本原因：BFC 高度计算不包含脱离流的子元素
父容器高度坍缩不是渲染错误，而是 CSS 规范强制要求：在块级格式化上下文中，高度只由参与该 BFC 的非脱离流子元素决定。
哪怕你给浮动子元素设了 height: 300px，父容器也“视而不见”——它只认那些还在普通流里的盒子。
- 用
display: flow-root是最干净的解法，它强制父容器新建一个 BFC，且该 BFC 会把浮动子元素纳入高度计算（现代标准） -
overflow: hidden或overflow: auto也能触发 BFC，但有潜在副作用：可能意外裁剪内容或错误触发滚动条 - 伪元素
::after { content: ""; display: table; clear: both; }是兼容方案，但它靠插入一个“看不见的块”来撑高，本质是绕过规范而非修复
float 仍存在的真实场景和陷阱
虽然 flex 和 grid 已成布局主流，但 float 在以下地方仍不可替代且容易踩坑：
- 打印样式表（print media）中实现图文环绕，
flex在多数打印机驱动里不被支持 - 老项目维护时遇到未清除的浮动列表，直接加
overflow: hidden可能导致右侧内容被裁剪 - Safari display: flow-root，降级时若只用伪元素 clearfix，要确保父容器没有
height或max-height限制 - 浮动 +
margin组合时，外边距折叠（margin collapse）失效，但很多人仍按普通流预期去调试间距
真正难的不是怎么“清浮动”，而是意识到：float 的行为逻辑自始至终都是一致的——它只服务文字流，从不打算撑开块级容器。一旦把这个前提刻进本能，所有“为什么父容器没高度”“为什么文字被切掉”“为什么 clear 没用”的问题，就只剩查规范和验证是否触发了 BFC 这一步。
