column-count仅在块级容器中生效，需确保父容器display为block、inline-block或table-cell；column-width优先于column-count；图片跨栏需用inline-block包裹并设break-inside: avoid；Grid与Flex分栏行为不同，Grid固定宽度，Flex可能压缩；float仅适用于图文环绕和IE9兼容；分栏语义决定技术选型，混用会导致失效。
column-count 只在块级容器里生效
你给 <div> 设了 column-count: 3 却没效果？先检查父容器的 display 值。如果父元素是 display: flex 或 display: grid，column-count 直接被忽略——它只认 block、inline-block 或 table-cell 这类块格式化上下文（BFC）容器。
常见踩坑点：
- 把分栏写在
<main>上，但<main>外层用了display: flex布局 —— 此时得把分栏逻辑下移到子容器，比如加个<article class="text-column"> - 用
column-width时，column-count只是“建议值”，浏览器会按实际宽度自动调整栏数；设了column-width: 200px后，column-count可能完全不生效 - 段落内图片或
<iframe>无法被break-inside: avoid控制，它们仍可能跨栏断裂；真要防断裂，得用display: inline-block包一层再设break-inside: avoid
grid-template-columns: 250px 1fr 不等于 flex: 0 0 250px / flex: 1
两者都能做左右分栏，但行为差异很实在：Grid 的 250px 是绝对固定，哪怕内容撑不开也死守；Flex 的 flex: 0 0 250px 是基础尺寸，但若容器太窄，min-width 没设，左侧栏可能被压缩到文字换行甚至图标重叠。
实操注意：
立即学习“前端免费学习笔记（深入）”；
- Grid 下右侧用
1fr，左侧固定宽，不需要额外处理高度塌陷；Flex 下必须确保html和body都有height: 100%，否则height: 100vh在子 flex 容器里可能失效 - Flex 左侧加
flex-shrink: 0是必须项，不是可选项；旧版 IE 对flex: 1解析异常，显式写成flex: 1 1 0更稳 - 别在 Grid 容器里嵌套 Flex 子项再调对齐——比如给右侧主区加
display: flex; align-items: center，语义混乱，调试时根本分不清是 Grid 轨道还是 Flex 主轴在起作用
float 布局现在只剩两个真实用途
不是“还能用”，而是“只有这两个场景还值得用 float”：
- 纯图文混排中的文字环绕图片：
img { float: left; margin-right: 1em; }，这是 float 的原始设计意图，至今无替代方案 - 老系统兼容兜底：目标用户还在用 IE9 或更早版本时，
float + overflow: hidden是唯一能稳定实现两栏的方案
其他所有分栏需求——包括三栏、响应式切换、动态内容插入——都该直接跳过 float。它脱离文档流的特性会让后续 DOM 操作（比如 JS 动态插入节点）位置错乱，且 clear 容易漏写，一漏就整个布局偏移。
分栏语义决定技术选型，不是视觉效果
你要排的是连续长文（比如新闻正文），就用 column-count；你要并列展示三个独立卡片（商品列表），就用 display: grid；你要左导航+右内容这种主辅结构，就用 display: flex 或 grid-template-columns。
最容易被忽略的点是：混用这三者会导致不可预测失效。比如在 display: grid 的容器里给某个子项设 column-count，或者给 flex 子项加 float——这些都不是“效果不好”，而是“根本不起作用”，连 warning 都不会报。
