浮动塌陷因父容器未触发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 的组合场景。
