现代网页左右分栏应优先使用display: flex或display: grid；float因需手动清除、易塌陷、响应式差且语义不符，仅限兼容ie8及更早版本时使用。
现代网页左右分栏，直接用 display: flex 或 display: grid 就能干净解决，float 已不推荐——它需要手动清除浮动、容易塌陷、响应式支持差，除非你必须兼容 IE8 及更早版本。
用 Flexbox 实现左定宽右自适应
这是最常用也最稳妥的方案，适合导航栏 + 主内容这类典型结构。
- 父容器设
display: flex，默认主轴为水平方向，无需额外声明flex-direction: row - 左栏加
flex-shrink: 0防止被压缩（尤其当内容超宽时），再设固定宽度如width: 240px - 右栏直接设
flex: 1，它会自动填满剩余空间；不用写width: calc(100% - 240px)，后者在缩放或字体变化时可能出错 - 如果右栏内部也要垂直居中或对齐，可在其上加
display: flex+flex-direction: column等组合，但别嵌套太深，否则难以调试
示例关键 CSS：
.container { display: flex; }
.left { width: 240px; flex-shrink: 0; }
.right { flex: 1; }
用 Grid 实现精确列宽控制
当你需要严格控制左右比例（比如左 25% / 右 75%，或左 200px / 右 1fr），Grid 比 Flexbox 更直观。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 父容器设
display: grid，然后用grid-template-columns: 200px 1fr——200px是左栏固定宽，1fr表示右栏占剩余全部空间 - 避免给子元素设
float、inline-block或多余width，Grid 会忽略这些干扰样式 - 想加间距？用
gap: 16px，而不是给子项加margin；Grid 的gap是布局级控制，不会影响网格线计算 - 注意：IE11 支持 Grid，但仅限旧语法（
display: -ms-grid），若需兼容，得单独写前缀或降级到 Flexbox
为什么不要用 float 做左右分栏
不是不能用，而是容易掉坑里：
- 父容器高度塌陷：浮动元素脱离文档流，父容器可能高度为 0，必须加
overflow: hidden或伪元素::after清除浮动 - 右栏写
width: calc(100% - 200px)后，一旦父容器有 padding 或 border，计算就偏了 - 响应式难处理：媒体查询中改
float方向（比如小屏改成float: none）不如 Flexbox 的flex-direction: column直观可靠 - 语义混乱：
float本意是文字环绕图片，强行用于布局属于 hack，可读性和维护性都低
响应式切换的关键点
左右分栏在手机上通常要变成上下堆叠，这个切换本身不难，但容易漏掉两个细节：
- 媒体查询断点别只写
@media (max-width: 768px)就完事——检查实际内容宽度，有些窄屏设备（如折叠屏半开状态）宽度可能卡在 768–800px 之间，内容仍挤不下 - Flexbox 下只需在小屏时给父容器加
flex-direction: column，但务必确认子项没写死height或min-height，否则堆叠后高度异常 - Grid 方案下，小屏可用
grid-template-columns: 1fr强制单列，但要注意：如果之前用了grid-column: 1 / -1这类跨列写法，切换后可能失效，得重置
真正麻烦的从来不是“怎么写两栏”，而是“怎么让两栏在各种尺寸、各种内容长度、各种嵌套深度下都不错位”——多测几组真实数据，比背熟语法重要得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
