用 flex 实现左右分栏只需三行 css：父容器设 display: flex，左栏设 width: 200px 和 flex-shrink: 0 防压缩，右栏设 flex: 1 自动填满；语义化标签提升可访问性与 seo，小屏用 flex-direction: column 切换为单列，配合 overflow-wrap: break-word 防文本溢出。
直接用 display: flex 就能跑通，不用浮动、不碰 Grid、不写媒体查询也能上手——关键在父容器和两个子元素的三行 CSS 控制逻辑。
为什么新手别碰 float 做左右分栏
float 会脱离文档流，导致父容器高度塌陷，后续元素错位；清除浮动要额外加伪元素或 overflow: hidden，但新手常漏掉这步，页面就“断层”了。更麻烦的是：一旦加了 margin/padding 或盒模型变化，宽度计算立刻失准，width: calc(100% - 200px) 这种写法在缩放或字体变化时极易溢出。
- 浏览器默认不触发 BFC，得手动“救场”，学习成本远超收益
- 响应式切换时，
float: none不会自动重排，还得配clear和重设 display - 语义标签（如
<main></main>、<aside></aside>）和 float 搭配后，可访问性支持变弱
flex 实现左右分栏最简三行写法
只改父容器和两个子块的样式，无需 JS、不依赖 class 层级嵌套，复制粘贴就能看到效果：
.container {
display: flex;
}
.left {
width: 200px;
flex-shrink: 0;
}
.right {
flex: 1;
}
-
flex-shrink: 0是关键：防止窄屏下左栏被压缩变形（比如文字挤成一坨） -
flex: 1等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0，右栏自动填满剩余空间 - 千万别给
.right加width，否则和flex冲突，浏览器会忽略其中一个
HTML 结构必须用语义化标签，别再全用 div
搜索引擎和屏幕阅读器靠标签理解内容关系。<div> 套 <code><div> 看似省事，但后期加无障碍属性、SEO 优化、甚至只是团队协作改样式，都会卡在“这 div 到底是导航还是主内容？”<ul>
<li>左侧是导航或侧边功能 → 用 <code><nav></nav> 或 <aside></aside>
<main></main>
<section></section> 或直接 <div class="container">，避免把 <code><main></main> 当布局容器（语义错误）移动端堆叠成单列只需加一条媒体查询
很多教程教一堆 JS 切换 class，其实纯 CSS 就够了。小屏时让主轴从 row 变 column，结构自然垂直排列：
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.left {
width: auto;
}
}
-
flex-direction: column是唯一需要改的属性，其余样式全部复用 - 去掉
.left的固定width，让它随内容自适应，避免窄屏下横向滚动 - 如果左栏想隐藏（比如抽屉导航），直接
display: none即可，.right会立即占满整行，不用动 flex 配置
真正容易被忽略的点是：flex 容器的最小宽度由子元素内容撑开，如果右栏里有长英文单词或 URL，又没设 overflow-wrap: break-word，整体会横向溢出——这不是布局失效，而是文本流没约束。加一行这个声明，比调 flex 更快解决问题。
