使用 css `inline-block` + `shape-outside` 创建点状六边形网格时，末尾几行六边形常因浮动布局计算误差而溢出父容器；根本解决方法是为容器添加等于单个六边形宽度（即 `--hex-span`）的 `padding-bottom`，以补偿 `shape-outside` 引起的行高塌陷。
在纯 CSS 构建六边形网格（pointy-top 类型）的过程中，开发者常采用 float: left 配合 shape-outside 实现错位堆叠效果——这是 CSS-Tricks 文章中推荐的经典方案。然而，该技术存在一个隐蔽但普遍的问题：容器的 content box 无法准确包裹所有子元素，导致底部几行六边形被意外裁剪或溢出（如你提供的截图所示：正确 vs 错误渲染）。
其根源在于 shape-outside 仅影响文本环绕行为，而 inline-block 元素的垂直对齐与行盒（line box）高度计算受浮动伪元素干扰，浏览器在计算容器最终高度时可能忽略最后一行因重叠（margin-bottom: var(--hex-overlap)）和浮动形状造成的视觉占用空间，从而导致 height: auto 或 flex-basis: max-content 失效。
✅ 标准解法（来自原文“Fighting the overflow”章节）：
为 .container 显式添加 padding-bottom，值等于六边形单元的水平间距（即 --hex-span），而非高度或其他尺寸：
.container {
/* ... 其他原有样式保持不变 ... */
padding-bottom: var(--hex-span); /* 关键修复！ */
}该补丁的作用机制是：通过底部内边距「预留空间」，强制容器内容区域向下延伸，确保所有 inline-block .hex 元素（包括因 shape-outside 错位产生的底部视觉区块）均被包含在 content-box 内。由于 box-sizing: border-box 已启用，此 padding 不会扩大容器总尺寸，仅修正内部高度计算。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 不要尝试用 min-height、height: fit-content 或 overflow: visible 替代 —— 它们无法修复 shape-outside 导致的行盒高度丢失；
- padding-bottom 值必须严格对应 --hex-span（即六边形中心间距），而非 --hex-diameter 或 --hex-triameter；若你调整了 --hex-span，务必同步更新此处；
- 若容器本身是 Flex 子项（如你的 .wrapper），请确保其 align-items 和 justify-content 不会意外压缩内容（当前 space-around 是安全的）；
- 此方案兼容 Chrome、Firefox 及 Safari（需开启实验性 WebKit 功能支持 shape-outside 的渐变）。
? 扩展建议：
若项目需更高健壮性或响应式适配，可考虑将 padding-bottom 改为 calc(var(--hex-span) * 1.2) 留出余量；或改用现代方案（如 CSS Grid + clip-path + transform: translate() 错位）规避 shape-outside 的布局副作用——但对纯 CSS 六边形网格而言，padding-bottom 仍是简洁、可靠、零 JS 的黄金解法。
