使用 `inline-block` 实现的点状六边形网格（pointy-top）常因浮动与行内布局的固有特性导致末尾单元格溢出父容器；根本解决方案是为容器添加等于单个六边形宽度（即 `--hex-span`）的 `padding-bottom`，以补偿 `shape-outside` 浮动造成的高度塌陷。
在基于 CSS shape-outside + float 构建响应式六边形网格时（如 CSS-Tricks 经典方案），一个隐蔽但高频的问题是：容器的 content box 无法正确包裹所有 .hex 子元素，末尾几行六边形会“消失”或溢出边界——即使你已精确计算了容器宽度、设置了 overflow: hidden 并反复调试 box-sizing 和 margin。
这个问题的本质并非样式错误，而是 CSS 浮动布局的高度坍缩行为：.container::before 使用 float: left 配合 shape-outside 控制文本流（此处用于影响 inline-block 六边形的换行位置），但浮动元素本身脱离文档流，其后的 inline-block 内容虽按视觉流排列，父容器却无法自动感知浮动所引发的垂直空间需求，尤其在最后一行未填满时，容器高度被低估，导致底部截断。
✅ 正确解法极其简洁：
在 .container 中显式声明 padding-bottom，值等于单个六边形的水平间距（即 --hex-span）：
.container {
/* ...其他原有样式... */
padding-bottom: var(--hex-span); /* ? 关键修复：补偿浮动导致的高度缺失 */
}? 为什么是 --hex-span？ 因为该值对应六边形的水平投影宽度（即相邻列中心距），也是 shape-outside 梯度重复周期的关键尺寸。添加此内边距可确保容器底部留出足够空间容纳最下行六边形的完整视觉高度，避免因换行错位导致的裁剪。
? 同时建议配合以下最佳实践：
- 保持 .container { font-size: 0 } 以消除 inline-block 元素间的空白字符间隙；
- 确保 .hex 的 vertical-align: top 与 line-height 匹配高度，防止基线对齐引发意外偏移；
- 移除冗余 flex-basis: max-content（容器已是 display: block，该声明无效）；
- 如需严格自适应，可将 width 改为 min-width 或结合 max-width 防止超宽。
最终效果：容器 content box 将稳定、准确地包裹全部六边形，无论数据量多少、视口尺寸如何变化，彻底告别“神秘消失”的单元格。这一方案兼容 Chrome、Firefox 及现代 Edge，无需 JavaScript 干预，纯粹 CSS 解决。
立即学习“前端免费学习笔记（深入）”；
