现代网页左右分栏首选flexbox或grid：flexbox用display: flex+flex:1实现自适应，grid用grid-template-columns: 240px 1fr精确控列；二者均优于需兼容老ie才用的float，且更易响应式堆叠与语义化布局。
现代网页左右分栏，直接用 display: flex 或 display: grid 就能干净解决，float 仅在必须兼容 IE8–IE10 的老项目里才考虑。
Flexbox 实现左右固定+自适应分栏
这是最常用、语义清晰、响应式友好的方式。核心是父容器设为 display: flex，左栏固定宽 + flex-shrink: 0 防压缩，右栏用 flex: 1 填满剩余空间。
- 左栏加
flex-shrink: 0很关键——否则内容变多时会被压缩变形 - 右栏不要设
width，否则会和flex: 1冲突；若需最小宽度，用min-width - 默认主轴是水平（
flex-direction: row），不用额外声明 - 如果父容器高度不确定，右栏内容垂直居中需额外加
align-items: center或对子元素用margin: auto
.container { display: flex; }
.left { width: 240px; flex-shrink: 0; background: #f5f5f5; }
.right { flex: 1; background: #fff; }
Grid 实现精确列宽控制
适合需要严格定义列比例、带间隙或后续可能扩展为多行多列的场景。用 grid-template-columns 直接声明两列，1fr 表示“剩余可用空间”，比百分比更可靠。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
grid-template-columns: 240px 1fr中的1fr不是像素值，它会动态分配剩余空间，不受内容撑开影响 - 列间间隙统一用
gap（推荐）或column-gap，别用margin—— Grid 自带对齐控制，margin反而破坏布局流 - 子元素无需设置
float、display: inline-block等旧式样式，它们会自动按网格轨道排列 - 如果右栏要居中显示文字，用
justify-items: center（整列居中）或对具体元素用text-align: center
.container { display: grid; grid-template-columns: 240px 1fr; gap: 16px; }
.left { background: #eef; }
.right { background: #fef; }
避免 float 布局的常见陷阱
虽然 float 还能跑，但问题集中：父容器塌陷、清除浮动冗余、响应式调整困难。除非维护老系统，否则不建议新项目使用。
- 忘记清除浮动会导致父容器高度为 0，常见补救是加
overflow: hidden或伪元素::after，但这只是“掩盖”而非“解决” -
float: left和float: right同时存在时，HTML 顺序会影响渲染——右栏必须写在左栏前面才能保证视觉顺序正确 -
width必须手动计算（如calc(100% - 240px)），一旦加 padding/border 就容易溢出 - 媒体查询里改方向（比如小屏堆叠）得重写整个浮动逻辑，不如 Flex/Grid 的
flex-direction: column或grid-template-rows直观
响应式切换：从并排到堆叠
左右分栏在移动端通常要变成上下堆叠，用媒体查询配合 Flexbox 最省事。
- 默认保持
display: flex，小屏下只需改flex-direction: column - 左栏在堆叠后常需加
width: 100%，否则可能保留原固定宽导致内容溢出 - 避免对
.left和.right单独设display: none—— 这会让语义结构断裂，屏幕阅读器无法理解内容关系 - 如果右栏内容重要性更高，堆叠时可考虑用
order调整 DOM 渲染顺序（例如让右栏先出现）
@media (max-width: 768px) {
.container { flex-direction: column; }
.left, .right { width: 100%; }
.right { order: -1; } /* 让右栏在顶部显示 */
}
真正要注意的是：分栏不是单纯视觉切分，而是信息层级的表达。左栏通常是导航或辅助信息，右栏承载主要内容——这个语义关系要在 HTML 结构（比如用 <aside></aside> 和 <main></main>）和 CSS 布局中同时体现，否则光靠样式对齐，后期维护和无障碍支持都会出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
