右侧内容滑落是因右栏未触发bfc且父容器高度塌陷，导致其从0,0开始渲染而掉至左栏下方；须同时满足左栏设宽并浮动、右栏触发bfc、父容器用伪元素清除浮动三个条件。
右侧内容滑落，基本就是浮动脱离文档流后，右栏没触发 BFC、也没留出足够空间——不是“没对齐”，是右栏压根没意识到左边有个浮动块在那儿。
右栏为什么掉到左栏下面？
浮动元素退出普通流，父容器高度塌陷，右栏作为后续块级元素，默认从 0, 0 开始渲染。如果它没做任何避让，就会被左栏“盖住”或直接掉到左栏内容末尾下方。
- 常见现象：右栏文字从左栏底部开始堆叠，或者整个
.right区块换行到底部 - 根本原因不是 margin 写少了，而是右栏没进入独立的块级格式化上下文（BFC）
- 只加
margin-left不够：它只是“挪位置”，但不阻止文字环绕或布局穿透
必须同时满足的三个条件
缺一不可，否则滑落问题反复出现：
-
.left必须设明确宽度（如width: 200px），且用float: left -
.right必须触发 BFC：overflow: hidden（最兼容）、display: flow-root（最干净，但 IE 不支持）或overflow: auto - 父容器必须清除浮动：
.container::after伪元素 +clear: both，不能只靠overflow: hidden代替（后者有裁剪副作用）
为什么 overflow: hidden 在右栏上容易踩坑
它确实能强制右栏绕开浮动区，但副作用很实在：
- 会裁剪所有溢出内容：下拉菜单、tooltip、
position: absolute的弹层，只要定位上下文不是.right自身，全被切掉 - 若右栏内部有横向滚动需求（比如长表格），
overflow: hidden直接封死交互 - 在 iOS Safari 中可能引发 touch 响应卡顿
- IE8 下若父容器没设
zoom: 1，overflow: hidden触发 BFC 可能失效
现代项目别硬扛 float，直接换 flex
用 display: flex 几乎消灭所有滑落问题，且天然等高、响应式友好：
.container { display: flex; }
.left { width: 200px; flex-shrink: 0; }
.right { flex: 1; min-width: 0; }
重点不是 flex: 1，而是 min-width: 0——没有它，右侧含长 URL 或未约束图片时仍会撑破、换行甚至消失。真正难处理的从来不是怎么把右栏“推”到右边，而是推完之后，整个页面还稳不稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
