推荐用 display: flex 实现左右两栏，5行CSS兼容IE10+，避免float的塌陷、清除、等高及响应式难题；核心是父容器设flex，左栏flex: 0 0 200px，右栏flex: 1。
别用 float 搭左右两栏——它不是“能用”，而是“改起来要花三倍时间 debug”。真要快速搭，直接上 display: flex，5 行 CSS 能跑通 IE10+，没浮动塌陷、不依赖 DOM 顺序、响应式也只改一行。
为什么 float 左右两栏现在基本等于自找麻烦
常见错误现象：右栏掉到下一行、父容器背景色消失、侧边栏高度比主内容矮一截、小屏切单列时 margin 和 clear 全乱套。这些不是你写错了，是 float 的机制决定的：它让元素脱离文档流，后续元素得靠 clear 或触发 BFC（比如 overflow: hidden）才能“感知”到它，而 BFC 又可能意外裁剪 box-shadow 或定位元素。
- 必须手动清除浮动，
.clearfix::after是标配，但别人接手第一眼就想删 - 左右栏高度不同，背景色对不齐；想等高得加 JS 或复杂 BFC 套路
- 响应式切单列时，
float规则得全重写，flex-direction: column却只要加一行 - IE8–9 才真需要
float；2026 年还在兼容它们的项目，通常已有整套 legacy 维护方案
用 flex 实现左侧固定 + 右侧自适应（推荐做法）
这是当前最省心、最不容易出错的写法，核心就三件事：父容器设 display: flex，左栏锁死宽度，右栏交给 flex: 1 自动撑满。
- 父容器必须写
display: flex，漏掉就完全无效 - 左栏用
flex: 0 0 200px（不伸缩、不收缩、基础宽 200px），比单纯width: 200px更稳，防内容撑爆 - 右栏用
flex: 1，它会吃掉所有剩余空间；若需最小宽度保护，加min-width: 300px - 右栏如果含长英文或无空格字符串（如 URL、base64），加
word-break: break-word防溢出
.container { display: flex; }
.left { flex: 0 0 200px; background: #f0f0f0; }
.right { flex: 1; background: #e0e0e0; word-break: break-word; }
Grid 方案：语义更干净，但兼容性要核对
如果你确定不支持 IE，且结构明确就是“两列”，grid 比 flex 更直白：一声明列宽，其余自动归位，子元素不用管顺序、不用设宽、不碰 flex 属性。
立即学习“前端免费学习笔记（深入）”；
- 父容器写
display: grid+grid-template-columns: 200px 1fr，1fr不是百分比，是“剩余空间的一份” - 子元素别再写
width: 100%，grid 下它默认填满轨道，重复设宽反而导致错位 - 加间隙统一用
gap: 1rem，别用margin，否则破坏轨道计算 - 小屏适配可用
grid-template-columns: minmax(200px, 1fr) 1fr，但注意窄屏下1fr可能被压缩到无法阅读
真正容易被忽略的点是：flex 和 grid 都要求父容器显式定义布局模式，漏掉 display 声明，样式就完全不生效——这不是浏览器 bug，是规范本身的要求。另外，所有现代框架（React/Vue）组件里嵌套的 div，默认仍是文档流，别以为加了 class 就自动 flex 了。
