右栏被左栏“顶下去”是因为未触发bfc，仍按普通流从顶部渲染；必须给右栏设overflow:hidden等触发bfc，并确保左栏有明确宽度、float:left且dom顺序在前，父容器也要触发bfc防塌陷。
错位不是 CSS 写错了，是浮动行为没被完整约束——漏掉任一关键条件，右栏就会从顶部开始渲染，盖住左栏或掉到下一行。
为什么右栏总被左栏“顶下去”？
根本原因：左栏 float: left 后脱离文档流，但右栏没触发 BFC（块级格式化上下文），仍按普通流从容器顶部开始排布，视觉上就叠在左栏上或被挤走。
-
overflow: hidden、overflow: auto、display: flow-root都能触发 BFC；overflow: visible（默认）不行 - 只加
margin-left: 200px不解决本质问题：它只是硬留空，右栏仍处于普通流，一旦左栏高度变化或内容撑高，就可能遮挡或换行 - 用 DevTools 检查右栏盒模型，如果它的
outline包裹了左栏内容，说明 BFC 没生效
左栏必须满足的三个硬性条件
少一个，右栏避让逻辑就断链。
- 必须设明确宽度，如
width: 200px；用百分比时得配box-sizing: border-box，否则 padding 会撑出容器 - 必须写
float: left（不能是right，否则右栏逻辑要重写） - HTML 中必须写在右栏之前：
<div class="left"></div> <div class="right"></div>；顺序颠倒，右栏先渲染，“看不见”浮动，布局直接失效
父容器不处理，塌陷和错位一起发生
父容器高度为 0，后续元素上浮钻进浮动区，这是错位的连带症状，不是独立问题。
- 推荐用
overflow: hidden或display: flow-root触发父容器 BFC —— 简洁、可靠、不依赖伪元素 - 伪元素清除法（
::after { content: ""; display: table; clear: both; }）仍需保留，仅当兼容 IE11 或旧 Safari 时使用；漏掉content: ""就完全失效 -
zoom: 1是 IE6–7 的 hasLayout hack，现代项目可忽略；若真要兼容，得加在父容器和右栏上
右栏常见错误写法与修正
很多“看起来能用”的写法，其实埋着响应式雷。
- ❌
.right { margin-left: 200px; }→ 左栏变宽时必须同步改，维护成本高；小屏缩放后易错位 - ❌
.right { float: right; }→ 两栏都脱离流，中间留白，无法填满 - ❌
.right { width: calc(100% - 200px); }但没配 BFC → calc 生效，但避让逻辑失效，内容仍可能被左栏遮挡 - ✅ 正确组合：
.right { overflow: hidden; width: calc(100% - 200px); }（IE9+ 支持） - ⚠️ 注意：右栏含
position: absolute子元素时，overflow: hidden会裁剪它，此时只能退回到margin-left方案
最容易被忽略的是：BFC 触发是单层的。给父容器加了 display: flow-root，不代表子容器里的浮动也自动被包裹——子容器若也有浮动项，得单独处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
