CSS浮动元素脱离文档流是因为float本质是图文环绕排版指令，使元素退出普通流、不参与父容器高度计算，但保留对行内内容的影响；父容器塌陷是规范行为，应通过display: flow-root触发BFC修复。
为什么只写 float: left 侧边栏会掉到主内容下方
浮动元素脱离文档流，父容器无法感知其高度，导致后续元素从顶部开始渲染——不是“没对齐”，而是主内容区根本不知道左边有个浮动块。常见现象是：侧边栏显示正常，但主内容区文字从侧边栏底部开始堆叠，甚至整个区块换行到底部。
container::after 清除浮动的写法必须带 display: table 或 display: block
伪元素清除法失效，往往是因为漏写了关键声明。只写 content: "" 和 clear: both 不够，浏览器不会把它当“块”来处理布局。
-
display: table最稳妥：触发 BFC 且兼容 IE8+ -
display: block也可用，但需配合height: 0或font-size: 0避免撑高容器 - 别用
display: inline——它不响应clear，清除无效
推荐写法：
.container::after { content: ""; display: table; clear: both; }
右侧主内容区该用 margin-left 还是 overflow: hidden
两者都能让主内容避开左侧浮动栏，但机制完全不同：
立即学习“前端免费学习笔记（深入）”；
-
margin-left: 200px：硬性留白，简单直接，但左侧宽度一变就得同步改这个值 -
overflow: hidden：触发 BFC，让主内容区自动绕开浮动区域，无需计算像素，响应式更友好 - 注意副作用：如果主内容里有下拉菜单、tooltip 或
position: absolute元素，overflow: hidden会裁剪它们——这时只能退回margin-left
HTML 结构顺序写反了，整个布局就失效
浮动依赖 DOM 渲染顺序。如果把主内容写在侧边栏前面，它先占满整行，侧边栏再浮动也只能被“挤”到下一行。
- ✅ 正确：
<div class="sidebar"></div><div class="main-content"></div> - ❌ 错误：
<div class="main-content"></div><div class="sidebar"></div> - 想语义上主内容优先？别用 float，换
display: flex或grid
真正容易被忽略的是：一旦用了 float，所有后续兄弟元素（比如 <footer>）默认会尝试绕排，除非显式加 clear: both。
