绝大多数情况下不值得用浮动布局，因其本为文字环绕设计，强行用于多列会引发清除浮动、父容器塌陷等问题；现代开发应优先选用Flex或Grid。
浮动布局现在还值得用吗
绝大多数情况下不值得。现代浏览器已全面支持 display: flex 和 display: grid，而浮动（float）本就不是为多列布局设计的——它最初只用来实现文字环绕图片。强行用 float 做多列，会立刻掉进清除浮动、父容器塌陷、响应式断裂这些老坑里。
常见错误现象：float: left 后父元素高度变成 0；相邻块级元素被“吸”上去；在缩放或小屏下列宽错乱甚至换行失效。
如果你维护的是 IE8 及更早版本的遗留系统，才需要考虑 float。否则，直接跳过它。
inline-block 实现三栏时为啥总有多余间隙
因为 inline-block 元素之间会把 HTML 中的换行符和空格当成文本节点渲染，产生约 4px 的默认间隙。这不是 bug，是规范行为。
立即学习“前端免费学习笔记（深入）”；
解决方法有几种，选哪个取决于你能否控制 HTML 结构或 CSS 作用域：
- 把 HTML 中的标签写成连写形式：
<div class="col"></div> <div class="col"></div>（不现实，可读性差） - 给父容器设
font-size: 0，子元素再单独设字体大小（注意input、button等表单控件可能受影响） - 用
margin-left: -4px抵消间隙（脆弱，依赖固定像素，缩放后可能失效） - 改用
flex—— 根本没这问题
Flex 布局在多列场景下的关键参数组合
真正稳定可控的方案就是 display: flex。核心不在“怎么写”，而在“怎么配”：
- 父容器必须设
display: flex，别漏掉flex-wrap: wrap（否则超宽就溢出，不会自动折行） - 子项宽度推荐用
flex: 1（等分）或flex: 0 0 33.33%（固定比例，避免内容撑大） - 慎用
width+flex混用：比如设了width: 200px又写flex: 1，结果由flex-basis决定，容易误判 - IE10–11 需加
-ms-flex前缀，但注意flex: 1在 IE 中要拆成-ms-flex: 1
示例（标准三栏等宽）：
section { display: flex; }
section > div { flex: 1; }
Grid 布局比 Flex 更适合多列？看什么场景
Grid 不是 Flex 的升级版，而是另一条路。它适合“二维”需求——既要控制行，又要精确控列，比如带侧边栏+主内容+广告位的复杂网格。
但如果你只是简单左中右三栏，或者响应式堆叠（移动端变单列），flex 更轻量、兼容更好、调试更直观。
Grid 容易被忽略的点：
-
grid-template-columns: repeat(3, 1fr)看似等分，但如果某列内容超长，又没设minmax(0, 1fr)，就会撑开整行 - IE 仅支持旧版 Grid（2011 规范），语法完全不同，基本无法平滑降级
- 调试时浏览器 DevTools 对 Grid 网格线的可视化支持虽好，但初学者容易把
grid-column和grid-area搞混，导致定位错乱
真要用 Grid，优先从 display: grid + grid-template-columns + gap 这三个最小集合开始试，别一上来就写 grid-area 命名区域。
