浮动布局本身不支持父容器感知子元素高度，现代项目应直接用display: flex替代；float元素脱离文档流导致父容器高度塌陷为0，display: flow-root可无副作用触发BFC撑高父容器，但等高需依赖Flex的align-items: stretch机制。
浮动布局本身不支持父容器感知子元素高度，所以“自适应高度”不是没写对，而是模型根本不提供这个能力；现代项目请直接用 display: flex 替代。
float 元素脱离文档流，父容器根本“看不见”它
这是所有问题的起点。一旦子元素设了 float: left 或 float: right，它就从普通文档流中抽离——父容器计算高度时，只看非浮动内容。哪怕子元素有 500px 高，父容器高度可能还是 0。
常见现象包括：
- 父容器背景色只显示一条细线
- 边框包不住内部浮动块
-
height: auto完全无效
overflow: hidden 或 clearfix 只是“撑高父容器”，不解决侧边栏等高
这两个方案能触发 BFC，让父容器重新包含浮动子项、恢复自身高度，但它们对子元素之间的高度同步毫无作用。
比如两栏浮动布局：
- 左栏只有 2 行文字，高度 60px
- 右栏有长列表，高度 400px
- 即使父容器被
overflow: hidden撑到 400px，左栏仍保持 60px，不会拉伸
你不能靠 height: 100% 强行拉左栏——它依赖父容器有明确高度，而浮动父容器的高度又来自子项……死循环。
Flexbox 的 align-items: stretch 是唯一可靠的等高机制
Flex 布局默认启用 align-items: stretch，只要父容器有可计算高度（比如 min-height: 100vh 或由内容撑开），所有 flex 项目就会自动拉伸到一致高度。
关键实操点：
- 父容器必须设
display: flex+flex-direction: row（默认） - 侧边栏写
flex: 0 0 240px（不缩放、不增长、固定宽） - 主内容区写
flex: 1，别加width或height - 如果侧边栏内有
position: absolute子元素，加min-height: 1px防止 stretch 失效
display: flow-root 是浮动场景的最小改动替代方案
如果你无法立刻重构为 Flex，只是想让父容器正确撑高（比如老系统维护），display: flow-root 比 overflow: hidden 更干净：
- 它专为创建无副作用 BFC 设计，不会裁剪
position: absolute弹窗或 tooltip - 不需要额外 HTML 节点，也不依赖伪元素
- 兼容 Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+
- IE 不支持，需回退到
clearfix类
真正容易被忽略的是：很多人花时间调 clear、margin-left、min-height，却没意识到——问题不在“怎么清浮动”，而在“浮动模型本就不该用于需要等高的场景”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
