<p>用float实现三列新闻列表需设.news-item为float:left、宽度用calc(33.33% - 20px)避免换行，加box-sizing:border-box，用:nth-child(3n)清除最后一列margin-right，并通过overflow:hidden或伪元素清除父容器塌陷。</p>
怎么用 float 实现三列新闻列表
直接给 .news-item 设 float: left，再配固定宽度和右外边距，就能横向排开。关键不是“能不能”，而是“怎么控得稳”。
常见错误现象：最后一列莫名其妙掉到下一行、容器高度塌成一条线、小屏下错位严重。
-
width别写死像素值（比如280px），优先用百分比或calc()，例如width: calc(33.33% - 20px)，把间隙算进去 - 必须处理父容器塌陷：在
.news-container上加overflow: hidden，或更稳妥地用伪元素清除：.news-container::after { content: ""; display: table; clear: both; } - 列间用
margin-right而非padding，否则最后一列会多出空白；可用:nth-child(3n)把它干掉
为什么 margin-right 比 gap 更难调准
因为 float 不是网格，没有内置间隙逻辑，所有间距都靠手动挤出来——这既是自由，也是陷阱。
使用场景：老项目要兼容 IE9+，或者 CMS 输出结构僵硬、没法改 HTML 语义时，float 是唯一能快速“推平”的办法。
立即学习“前端免费学习笔记（深入）”；
- 百分比宽度遇上小数像素（如
33.333333%）容易触发浏览器舍入误差，导致第三列换行；微调成33.3%或改用calc(100% / 3 - 10px) -
box-sizing: border-box必须加，否则padding和border会让实际宽度超限 - 不要依赖
text-align: justify对齐浮动项——它只对行内元素有效，对float无效
哪些地方一动就崩：响应式切换时的典型坑
想在平板变两列、手机变一列？光靠媒体查询改 width 和 margin 不够，还得同步处理清除逻辑和盒模型。
性能影响几乎为零，但兼容性代价高：IE 下双倍 margin、Safari 旧版对 ::after 清除支持不稳。
- 媒体查询里重设
width同时，记得重置margin-right，比如两列时用calc(50% - 10px)，并清除:nth-child(2n)的右距 - 手机端切回单列，别只删
float，还要补clear: both防止残留浮动影响后续内容 - 如果列表项里有图片，
float: left图片后，标题和摘要要用overflow: hidden包住，否则文字可能被图片遮住
什么时候该放弃 float 改用 display: grid
当你开始反复计算 calc()、写一堆 :nth-child、或者发现设计师临时说“中间列要宽一点”——这就是信号。
现代项目里，float 做多列本质是在用扳手拧螺丝：能转，但不是为这事造的。
-
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))一行顶十行float媒体查询 -
gap属性天然支持响应式，不用操心“最后一列要不要清 margin” - 等高、垂直居中、对齐控制这些事，
float根本不提供接口，硬搞只能靠 JS 或 hack
浮动布局真正难的不是写出来，是写完之后不敢动——因为没人能立刻说清改一个 margin 会影响几处位置。
