用 display: flex 实现左右分栏最稳妥：父容器设 display: flex，左栏 flex: 0 0 240px，右栏 flex: 1 并加 min-width: 300px 和 overflow-wrap: break-word，小屏用 flex-direction: column 切换布局。
用 display: flex 实现左右分栏最不容易出错
新手直接上 display: flex，别碰 float，也先别学 grid——它逻辑清晰、浏览器兼容好（IE10+）、代码少、改起来不懵。
常见错误现象：左栏被压缩、右栏溢出、两栏高度不对齐、页面空白一大片。
- 父容器必须设
display: flex，漏掉这句就完全没效果 - 左栏推荐写成
flex: 0 0 240px（不伸缩、不收缩、宽固定），比只写width: 240px更稳，防内容撑开变形 - 右栏写
flex: 1，它会自动占满剩余空间；如果怕小屏下太窄，加一句min-width: 300px - 默认
align-items: stretch就能让两栏等高，但某些 CSS 重置库会覆盖它，检查父容器是否意外设了align-items: flex-start
<main></main> 和 <aside></aside> 是语义化左右分栏的正确标签组合
别用一堆 <div class="left"> 和 <code><div class="right"> ——不仅难维护，还影响 SEO 和屏幕阅读器识别。
<p>使用场景：文章页（左为主内容，右为推荐/分类/作者信息）、后台控制台（左为导航，右为操作区）。</p>
<ul>
<li>
<code><main></main> 包主内容，<aside></aside> 包辅助信息，这是 HTML5 明确规定的语义关系
<main></main> 在前、<aside></aside> 在后，这样小屏堆叠时主内容仍优先读取<aside></aside> 放进 <nav></nav> 里——除非它真是导航；也不要给 <aside></aside> 加 role="navigation"，语义冲突<section></section> 替代 <aside></aside>，更准确响应式断点要加 flex-direction: column，不是删样式
小屏下左右变上下，核心就一句：在媒体查询里把父容器的 flex-direction 从 row 改成 column。
容易踩的坑：有人用 display: none 隐藏一栏再显示另一栏，结果 SEO 和可访问性全崩了。
- 断点值别硬写
max-width: 768px，优先用max-width: 600px或max-width: 480px，更贴合真实手机 viewport - 改方向后，记得重置
align-items：水平排布时常用flex-start，竖排后可能需要stretch或center控制对齐 - 如果右栏有固定高（比如广告图），竖排后可能撑开页面，加
max-width: 100%和height: auto保比例 - 别在子元素上写
width: 100%来“适配”，flex 容器里宽度由 flex 分配，硬写反而破坏布局
右侧内容超长时，word-break 和 overflow-wrap 必须配一个
英文长单词、无空格 URL、连续数字会直接撑破右栏，这是新手上线后最常被 QA 打回来的问题。
性能影响几乎为零，但不加就会导致横向滚动条或布局错位。
- 首选
overflow-wrap: break-word，它只在必要时断行，保留语义完整性 -
word-break: break-all比较激进，中文也会被强行拆字，慎用 - 这两条写在右栏容器上（比如
<main></main>或包裹它的 div），别只写在<p></p>里——子元素继承不到 - 如果用了
pre或code块，它们默认不换行，需单独加white-space: pre-wrap
height 或 min-height。flex 布局本身不触发 BFC，如果父容器没高度约束，又恰好内容为空或加载延迟，整个分栏区域可能塌陷看不见——加一句 min-height: 200px 或 height: fit-content 能省掉大半排查时间。
