现代项目应直接用flex或grid替代float和绝对定位：前者需手动清除塌陷、等高难保、响应式脆弱；后者脱离文档流、破坏语义、维护成本高。
现代项目直接用 display: flex 或 display: grid，别碰 float 和绝对定位——前者要手动清除浮动、等高难保、响应式脆弱；后者脱离文档流、破坏语义、维护成本高。
用 Flex 实现左中右：父容器必须设 display: flex，子元素顺序即渲染顺序
Flex 布局下，HTML 元素顺序直接影响视觉位置，不需要靠 float: left/right 拼凑。中间栏必须放在 HTML 中间，否则 flex: 1 会分配给错的元素。
- 左栏和右栏用固定宽：
width: 200px或更稳妥的flex: 0 0 200px（禁缩放 + 禁伸展） - 中间栏用
flex: 1，不是flex: 1 1 auto——后者在内容超长时可能意外压缩 - 间距统一用
gap: 12px，别用margin，否则干扰 flex 的剩余空间计算 - 如果父容器有 padding，记得加
box-sizing: border-box，避免宽度溢出
用 Grid 实现左中右：一行三列，grid-template-columns 决定列宽比例
Grid 更适合需要精确控制列宽、间距、对齐的场景，比如导航栏里 logo 左置、菜单居左、操作项右锚定。
- 写法简洁：
grid-template-columns: 200px 1fr 240px——左栏 200px、中栏占满剩余、右栏 240px - 想让中间栏最小宽度可控？换成
minmax(300px, 1fr) - 列间间隙用
column-gap: 12px或统一gap: 12px，不推荐用margin - 注意：子元素无需额外
float或position，Grid 自动按源顺序填入各列
为什么不要用 float 做三栏布局
除非你正在维护 IE8 项目，否则 float 是纯技术债。它带来的问题不是“能不能做”，而是“做完之后谁来修”。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 父容器塌陷是默认行为，必须加
.container::after { content: ""; display: table; clear: both; }或overflow: hidden -
margin: 0 auto在浮动上下文中失效，居中逻辑全乱 - 左右栏高度不一致时，中间栏会被“顶歪”，等高需额外 hack（如
display: table-cell） - 响应式断点里改
float方向极易引发重排错乱，而 Flex/Grid 天然支持@media重定义
导航栏这种“伪三栏”更适合 Grid + Flex 协同
像 logo + 主菜单 + 右侧登录按钮这类结构，本质是“宏观三区、微观多元素”，硬套三栏布局反而僵化。
- 外层用
display: grid划分三区域：grid-template-columns: auto 1fr auto - 中间区域再套一层
display: flex，用justify-content: space-between推开左右两组<ul> - logo 放在第一格，主菜单
<ul>放第二格，右侧功能<ul>放第三格——语义清晰，屏幕阅读器友好 - 避免把 logo 单独提成
position: absolute，那会让它脱离可访问性树
真正容易被忽略的是：三栏布局的“中间栏”从来不是“内容容器”，而是“空间协调者”。它的核心职责是让左右栏稳住、自身不抢焦点、响应时不撕裂——所以 flex: 1 或 1fr 不是魔法，是明确的契约声明。
