box-sizing: border-box不能解决等宽问题，因其仅控制宽高是否包含padding/border，不影响列分配逻辑；真正实现等宽需依赖grid+fr单位，如repeat(3, 1fr)按份数均分剩余空间，与内容无关。
直接用 display: grid 配合 repeat() 和 1fr，别碰 float 或硬写 width: 33.333% —— 盒模型本身不负责“等宽列”，那是布局上下文（flex 或 grid）的事，box-sizing 只影响 padding/border 是否挤占 width，它不能让多列自动均分。
为什么 box-sizing: border-box 不能解决等宽问题
box-sizing: border-box 的作用是让 width 包含 padding 和 border，避免子项因内边距撑出容器。但它对“列怎么分”毫无影响：
- 在
flex容器里设box-sizing: border-box，但没控制flex-basis，列依然会因内容长度不同而宽窄不一 - 在普通
block流中，即使所有子项都设了width: 33.333%和box-sizing: border-box，浮动不清除或未设float就根本排不成行 - 它不修复小数精度误差（如
33.333% × 3 = 99.999%），也不阻止浏览器把input默认min-width当作 flex 基准
真正起效的组合：grid + fr 单位
等宽列的本质是“按份数瓜分可用空间”，fr 就是为此设计的单位。以下写法在 iOS 15+、Android Chrome 110+ 中稳定：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}-
repeat(3, 1fr)表示严格三列，每列拿走 1/3 的剩余空间，不依赖内容宽度 -
gap独立于列宽计算，不会导致最后一列换行（对比margin易引发外边距折叠或溢出） - 无需
box-sizing干预 ——fr分配的是容器内可用空间，padding/border 自动从各列内部扣除
flex 场景下必须补 calc() 才能勉强等宽
如果非要用 flex（比如要兼容旧版 Safari），flex: 1 在移动端基本不可靠。必须显式锁定基础宽度：
立即学习“前端免费学习笔记（深入）”；
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item {
flex: 0 0 calc(33.333% - 8px); /* 假设 gap 总和为 8px */
box-sizing: border-box;
}-
flex: 0 0关闭伸缩，只靠calc()定宽度，绕过内容干扰 - gap 值必须与
calc()中减去的值一致，否则列宽错位 - 子项若有图片或
input，还得额外加min-width: 0，否则某些 Android 版本会忽略flex-basis
float 方案只适合无交互的静态页
纯展示型老项目若需兼容 IE8–9，float 是唯一选项，但代价明确：
- 每列写
width: 33.333%，父容器必须overflow: hidden清浮动，否则高度塌陷 - 小数精度误差无法消除，三列总宽常为
99.999%，留白或右侧偏移肉眼可见 - 无法响应式 —— 想在小屏变两列？得靠媒体查询重写全部
width和清除逻辑，维护成本高 - 任何 hover 动画、JS 动态增删子项，都可能触发重排错乱，因为 float 不是布局容器，只是脱离流的定位技巧
真正难的不是写几列，而是当子项里混着图片、富文本、表单控件时，grid 能稳住列宽，flex 得层层加 min-width: 0 和 overflow: hidden，float 则大概率直接放弃治疗。
