现代网页分栏响应式布局应优先使用display: flex或display: grid；float仅兼容ie8–9时考虑，易导致塌陷、错位及响应式失效。
现代网页分栏响应式布局，直接用 display: flex 或 display: grid 就能干净实现，float 仅在必须兼容 IE8–9 时才考虑，且极易出错。
用 flex 实现左定宽右自适应（最常用场景）
这是导航栏 + 主内容区的标配写法，稳定、易维护、兼容性好（IE10+ 支持）。
- 父容器必须设
display: flex，子项默认水平排列，无需额外写flex-direction: row - 左栏加
flex-shrink: 0并设固定宽度（如width: 240px），否则内容稍多就会被压缩变形 - 右栏用
flex: 1，它等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0，能自动吃掉剩余空间 —— 别写width: calc(100% - 240px)，缩放或字体变化时会偏移 - 若右栏高度撑不满视口，需给父容器加
min-height: 100vh，否则背景色/边框可能不显示
用 grid 控制精确列宽与间隙（适合比例敏感场景）
当左右栏宽度关系必须严格（比如左 200px / 右 1fr，或左 25% / 右 75%），grid 比 flex 更直观可控。
- 父容器设
display: grid和grid-template-columns: 200px 1fr，1fr是剩余空间单位，不是百分比，不受内容宽度干扰 - 加间距统一用
gap: 16px，别给子项加margin——gap是布局级控制，不影响网格轨道计算 - 子元素上所有
float、display: inline-block、width都要删掉，Grid 会忽略它们，还可能引发冲突 - IE11 支持 Grid，但只认旧语法
display: -ms-grid；若需兼容，得单独补前缀或降级到 Flexbox
响应式切换时两个常漏的细节
左右分栏在小屏变上下堆叠看似简单，但实际项目里翻车最多的地方就在这儿。
- 断点别硬写
@media (max-width: 768px)就完事——折叠屏半开状态、某些平板横屏宽度可能卡在 768–800px，内容仍挤不下，建议按内容实际宽度测，再加 40–60px 缓冲 - 切换后必须重置
width和clear：只写float: none不够，子项得加width: 100%，父容器要确保有clearfix或overflow: hidden，否则高度塌陷 - 如果用了
flex，响应式只需改flex-direction: column；但注意align-items默认是stretch，若子项有max-width，可能造成左右不对齐
为什么 float 在响应式里特别危险
它不是不能用，而是副作用太隐蔽，尤其混入现代组件后突然失效。
-
float元素脱离文档流，父容器高度为 0 —— 表现为背景色消失、边框不显示、后续元素上浮 - 媒体查询中反复切
float: left↔float: none，容易触发 iOS Safari 的重排抖动，滚动时内容闪一下 - 和
position: absolute、transform、Vue/React 动态渲染混用时，浮动容器可能被意外裁剪（比如第三方弹窗 JS 给body加了overflow: hidden） - 若非维护老项目，千万别在新代码里写
float做分栏 —— 看似省事，后期调试成本远高于初期多写两行flex
真正难的不是写出能跑的代码，而是让布局在不同设备、不同缩放、不同字体设置下都保持结构稳定。尤其是 flex-shrink: 0 和 gap 这类细节，漏掉一个，上线后就可能在某台 iPad 上莫名错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
