CSS两栏式布局实战_左侧固定右侧自适应的传统实现

浮动塌陷因父容器未触发bfc，需用overflow:hidden等创建bfc；flexbox中flex-basis优先级高于width；grid推荐grid-template-columns:200px 1fr；移动端须设box-sizing:border-box防溢出。

为什么 Float + margin 还是塌陷？

因为父容器没触发 BFC，浮动元素完全脱离文档流，高度塌陷是必然结果。不是代码写错了，是忘了兜底。

• 必须给父容器加 overflow: hidden、display: flow-root 或 float 本身来创建 BFC
• float 左侧后，右侧用 margin-left 留出固定宽度，不能靠 width 硬设（否则小屏会横向滚动）
• IE8+ 兼容但不支持 display: flow-root，得降级用 overflow: hidden

.container {   overflow: hidden; /* 关键：触发 BFC */ } .left {   float: left;   width: 200px; } .right {   margin-left: 200px; /* 和 left 宽度严格一致 */ }

Flexbox 实现时 flex-basis 和 width 混用踩什么坑？

两者同时存在时，flex-basis 优先级更高；但如果你只设 width，在 flex: 1 下它会被忽略——这是最常被忽视的隐式行为。

• 左侧固定：用 flex: 0 0 200px（等价于 flex-grow: 0; flex-shrink: 0; flex-basis: 200px）
• 右侧自适应：用 flex: 1，别再额外写 width: 100%，否则可能触发最小宽度挤压
• IE10–11 对 flex: 1 支持不稳定，建议显式写全 flex: 1 1 auto

.container {   display: flex; } .left { flex: 0 0 200px; } .right { flex: 1; }

Grid 布局中 grid-template-columns 的 minmax() 怎么不生效？

写了 minmax(200px, 1fr) 却发现左侧还是被压缩，大概率是因为容器本身没设 min-width，或者父级有 overflow: hidden 截断了计算。

• 固定侧栏推荐写法：grid-template-columns: 200px 1fr，简单直接，兼容性也比 minmax 好
• 真要用响应式弹性：grid-template-columns: minmax(200px, 200px) 1fr —— 注意第二个参数不是 auto，否则失去约束力
• Grid 在 safari 15.4 之前对 1fr 在嵌套容器中的表现有偏差，建议外层容器加 width: 100%

移动端适配时，为什么右侧内容总被“挤掉”一行？

不是布局逻辑错，是默认盒模型下 padding 或 border 让右侧实际可用宽度小于预期，尤其当左侧用 box-sizing: content-box（浏览器默认）时更明显。

立即学习“前端免费学习笔记（深入）”；

• 全局加 * { box-sizing: border-box } 是底线，否则每次写 width 都得手动减去 padding 和 border
• 右侧如果含文本或图片，记得加 word-break: break-word 和 max-width: 100%，防溢出破坏布局
• 某些安卓 webview 对 flex: 1 的收缩行为异常，可加 min-width: 0 强制允许压缩

真正麻烦的从来不是选哪种方案，而是同一份 css 在不同渲染引擎里对「可用宽度」的判定逻辑差异——尤其是涉及 border-box、flex-shrink 和容器 overflow 的组合场景。