float 元素不参与父容器高度计算是 css 2.1 规范定义的行为，因其脱离文档流；修复塌陷应优先用 display: flow-root，兼容方案用 clearfix::after 三要素齐全的伪元素；float 仅适用于图文环绕等特定场景。
因为 float 的设计目的从来就不是布局容器，而是图文环绕排版指令——它让元素从 normal flow 中“退籍”，浏览器在布局计算时直接跳过它。
float 元素为何不参与父容器高度计算
父容器高度塌陷为 0，并非渲染 bug，而是 CSS 2.1 规范明确定义的行为：height: auto 只基于仍在文档流中的子元素计算高度。一旦子元素设了 float: left 或 float: right，它就被视为“已注销”，哪怕有 height: 300px，父容器也视而不见。
常见现象包括：background-color 只剩一条细线、border 塌成单边、后续兄弟 <div> 直接顶进浮动区域、<code>padding 视觉上完全失效。
- 别试
min-height: 1px—— 它依赖文档流内内容撑高，对脱标元素无效 - 别给父元素加
clear: both——clear只对同级块级元素生效，不作用于父容器自身 -
width: 100%或display: block也无法挽回——只要float不是none，就一定脱标
clear 属性到底在“清”什么
clear 不是回收浮动，也不是让元素回归文档流，它只控制当前元素自身的上边界位置：告诉浏览器“我的 margin-top 边界，必须低于指定方向所有浮动元素的 bottom”。
-
clear: left→ 当前元素必须下移到所有float: left元素下方；对float: right无效 -
clear: both→ 同时避开左右浮动，常用于浮动列表后的分隔线或按钮 -
clear对display: inline元素完全无效，只对块级元素起作用
修复父容器塌陷，该选 display: flow-root 还是 clearfix
两者都能触发 BFC，但机制不同：
-
display: flow-root是现代标准解法：它强制父容器生成新的块级格式化上下文（BFC），使高度计算包含浮动子项——简洁、语义清晰、无需伪元素 -
.clearfix::after是兼容方案：靠插入一个真实参与文档流的块级锚点（display: table+clear: both）把父容器底部“物理拉下来” - 必须写全三要素：
content: ""（不写则伪元素不生成）、display: table（比block更稳，防外边距合并）、clear: both（加在伪元素上） - 若父容器自己也设了
float或position: absolute，那它已脱离文档流，加clearfix也没用
float 仍存在的合理使用场景
现代页面结构已基本不用 float 布局，但它在特定场景仍有不可替代性：
- 图文混排：段落文字自动绕行右浮动图片，且保持行框（inline formatting context）连续性
- 打印样式表：PDF 导出时 float 对文字环绕的支持更稳定
- 遗留系统维护：老项目中大量使用 float 实现多栏布局，强行替换可能引发连锁错位
关键要记住：float 脱标是规范行为，不是缺陷；问题不在 float 本身，而在误把它当布局工具用。真正容易被忽略的是——float 和 display 值无关，哪怕设成 display: block，只要 float 不是 none，就一定脱离文档流。
