应优先使用 flex 或 grid 布局，避免 float；float 仅适用于图文环绕等极少数场景，因其脱离文档流易导致父容器塌陷、换行错乱及响应式失效等问题。
直接用 display: flex 或 display: grid，别碰 float——它现在只在图文环绕这种极少数场景里还有存在价值。
为什么不能从 float 入手学多栏布局
新手照着老教程写 float: left，很快会卡在三个地方：父容器背景突然消失、右侧内容莫名其妙换行、手机上看所有栏叠成一坨。这不是你代码写错了，是 float 本身让元素脱离文档流，而你还没学到“清除浮动”“BFC”这些补救概念。
-
overflow: hidden能临时撑高父容器，但在某些安卓 WebView 里会裁剪溢出内容 -
::after伪元素清除必须严格写在最后一个浮动元素之后，写错位置就失效 - 响应式时只改
width不重置float和clear，移动端大概率崩盘 - IE9 及以下才需要兼容
float，2026 年绝大多数项目已无此压力
flex 实现左右主辅分栏的最小可行写法
比如文章页常见结构：左侧固定导航栏 + 右侧自适应正文。三行 CSS 就够，且天然响应式：
.container { display: flex; }
.left { width: 240px; flex-shrink: 0; }
.right { flex: 1; }- 别给
.right设width，否则和flex: 1冲突，宽度计算异常 -
flex-shrink: 0比min-width: 240px更可靠——后者在 flex 容器中常被忽略 - 移动端想隐藏左栏？直接
display: none，.right会自动占满整行，不用改布局逻辑 - 所有栏必须是
.container的**直接子元素**，嵌套一层div就失效
grid 实现三栏等宽卡片布局的稳妥写法
适合产品展示、友情链接这类模块化内容，比 flex 更直观，也不用操心换行逻辑：
立即学习“前端免费学习笔记（深入）”；
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1rem;
}-
repeat(auto-fit, minmax(300px, 1fr))表示：每栏至少 300px，能放几栏放几栏，剩余空间均分 - 别在 grid 容器里混用
float或inline-block，渲染会错乱 - 旧版 Safari（iOS 10.3 之前）不支持 grid，可用
@supports (display: grid)回退到 flex - 列间距统一用
gap，别用margin——后者会干扰轨道计算，还可能触发 margin 折叠
真正容易被忽略的不是语法，而是盒模型控制：全局加 * { box-sizing: border-box; }，然后确保所有栏内元素没偷偷用 float 或 position: absolute——它们会直接退出布局流，调试时根本找不到原因。
