浮动多列布局塌陷因浮动元素脱离文档流致父容器高度坍缩，解决需触发BFC或清除浮动；Flexbox中flex-wrap与flex-basis配合实现响应式多列，column-count仅适用于文本分栏。
浮动实现多列布局时为什么元素会塌陷
浮动元素脱离文档流，父容器无法自动包裹它们，导致高度坍缩——这是最常遇到的视觉错乱。解决的关键不是强行设高，而是触发BFC或清除浮动。
常见做法是给父容器加 overflow: hidden（简单但可能截断阴影/下拉菜单），或在最后一列后插入带 clear: both 的空元素（语义差）。更现代的方式是用伪元素清除：
.container::after {
content: "";
display: table;
clear: both;
}注意：浮动本身不支持等高列，若某列内容更多，其他列不会自动拉伸对齐。
Flexbox 多列布局中 flex-wrap 和 flex-basis 怎么配
单行多列靠 flex-direction: row + flex-wrap: nowrap；要允许换行（比如响应式场景），必须设 flex-wrap: wrap，否则子项会被强制压缩甚至溢出。
立即学习“前端免费学习笔记（深入）”；
flex-basis 决定主轴上的初始尺寸，比 width 更可靠——尤其在弹性缩放时。例如三等分列：
.container { display: flex; flex-wrap: wrap; }
.item { flex-basis: 33.333%; }但实际中建议留点余量防四舍五入错位：flex-basis: calc(33.333% - 4px)，再配合 gap: 8px 控制间距。
容易忽略的一点：flex-basis 设为 0% 时，所有子项从零开始按 flex-grow 分配剩余空间，这才是真正“均分”的逻辑。
用 column-count 做多列和 Flex/Grid 的本质区别
column-count 是 CSS Columns 模块，专为**文本流分栏**设计（像报纸），内容按顺序垂直切分，不是按元素划分列容器。它不适用于卡片、表单等需要独立交互的区块布局。
典型误用场景：把几个 <div class="card"> 放进 <code>column-count: 3 容器里，结果卡片被硬生生从中间劈开——因为它是按内容高度切，不是按元素边界切。
对比 Flexbox：每个子元素保持完整，可单独设置背景、边框、hover 效果；Grid 更进一步，能精确定位跨列/跨行。Columns 只适合纯文本段落或极简图文混排。
移动端多列布局怎么避免 Flexbox 换行错乱
小屏幕下 flex-wrap: wrap 虽然能换行，但如果子项 min-width 设得过大（比如固定 300px），会导致单列撑满、其余列被挤到下一行，视觉上只剩一列。
解决方案是用相对单位约束最小宽度：
- 用
min-width: 0配合flex: 1让子项可收缩到底 - 或设
min-width: calc(50% - 8px)（双列）+gap防止贴边 - 媒体查询中主动改
flex-direction: column切成单列流，比依赖换行更可控
另外，iOS Safari 对 gap 的旧版本支持不稳，必要时用 margin 回退，但要注意避免首尾外边距冗余。
Flexbox 的列对齐、换行、响应行为都依赖于父子容器的组合设置，而不是单个属性生效；浮动方案现在只适合兼容老浏览器的兜底场景，且必须处理好清除和等高问题。
