浮动重叠本质是父容器高度塌陷致右栏从顶部流式渲染并撞入左栏浮动区；overflow:hidden虽通过触发bfc使右栏避开左栏，但会裁剪下拉菜单、阴影等溢出内容，且@media print中失效。
浮动重叠不是“右栏没让开”，而是父容器高度塌陷后，右栏从顶部开始流式渲染，直接撞进左栏的浮动区域——加 clear 或改用 display: flex 才是正解。
为什么 overflow: hidden 能让右栏自适应却常出问题
它靠触发 BFC（块级格式化上下文）强制右栏避开左栏浮动空间，但副作用明显：
-
overflow: hidden会裁剪所有溢出内容：下拉菜单、阴影、position: absolute子元素、横向滚动条全被截断 - 在
@media print中该属性失效，打印预览里重叠照旧 - 若右栏本身有
transform或box-shadow，某些 Chrome 版本会触发渲染异常 - 真正生效的视觉证据是：开发者工具中给右栏加
outline: 1px solid red，应完整包裹自身内容，且不包含左栏
clear: both 加在哪才有效——常见错位根源
clear 只作用于当前块级元素自身外边距，让它“避开前面的浮动兄弟”，不是清浮动也不是撑高父容器：
- ✅ 正确：左栏
float: left，右栏是它的下一个兄弟块级元素 → 给右栏加clear: left（比both更精准） - ❌ 错误：给左栏自己加
clear: both—— 它已脱离文档流，该声明无意义 - ❌ 错误：给父容器加
clear: both—— 它不是浮动元素的兄弟，浏览器根本不处理 - ⚠️ 注意：如果右栏是
display: inline或被其他样式转成非块级，clear直接失效
现代项目该用什么替代 float 实现两栏自适应
浮动本就不是为布局设计的，强行用于结构只会埋坑。推荐方案按优先级排序：
-
display: flex：父容器一行声明display: flex，左栏设flex: 0 0 200px（固定宽），右栏设flex: 1（自动填满），无需清除、无塌陷、响应式友好 -
display: flow-root：仅需给父容器加这一行，即可触发 BFC 包裹浮动子项，兼容 Chrome 64+/Firefox 61+/Safari 12.1+，语义比overflow: hidden干净 - 伪元素
.clearfix::after：仅当必须兼容 IE8–11 时使用，display: table是关键，display: block在 IE8 下无法正确清除
真正容易被忽略的是：HTML 结构顺序不能颠倒——右栏必须写在左栏之后，否则渲染时右栏先占满整行，左栏浮动会被挤到下一行；而用 flex 或 grid 就完全摆脱了这种顺序依赖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
