display: flex 本身不直接设置子元素高度，但会创建新的块级格式化上下文（BFC），阻止子元素的外边距塌陷，从而让 .card 真实包裹其内部内容（含 .card-bottom-container 的上下 margin），导致视觉高度显著增加。
flex 容器如何影响子项高度：深入解析 margin 塌陷与布局上下文变化
在 CSS 布局中，一个看似微小的样式变更——如为父容器添加 display: flex——却可能引发子元素高度的明显变化。这并非 Flexbox “主动拉伸”子项，而是它悄然改变了整个布局上下文的行为规则，核心在于 margin 塌陷（Margin Collapsing）机制的启用与禁用。
? 根本原因：Flex 容器终结了外边距塌陷
在标准文档流中，相邻块级元素的垂直外边距（margin-top 与 margin-bottom）会发生塌陷：两个相邻 margin 不会叠加，而是取其中较大者作为实际间距。更关键的是，子元素的顶部/底部外边距，若父容器未形成 BFC 且无边框/内边距/内容分隔，会“溢出”到父容器外部——即所谓的外边距穿透（margin protrusion）。
你的代码中：
.card > .card-bottom-container {
margin: 1rem; /* ⚠️ 这个上下 margin 在非 flex 父容器中会塌陷并穿透 */
}-
✅ 当
.cards-container未设display: flex：.cards-container是普通块级容器，未触发 BFC。.card-bottom-container的margin-top: 1rem和margin-bottom: 1rem会：- 向上塌陷至
.card顶部边界之外； - 向下塌陷至
.card底部边界之外；
→ 结果：.card的计算高度仅由其内容（空<a></a>标签）和内边距/边框决定，视觉上“被压缩”，看起来高度很小。
- 向上塌陷至
✅ 当
.cards-container设为display: flex：
Flex 容器自动成为 BFC（Block Formatting Context）。BFC 的核心特性之一就是：内部子元素的外边距不会与外部元素塌陷，且子元素的 margin 会被严格包含在其父容器内部。
→ 结果：.card-bottom-container的1rem上下 margin 被完整“收容”在.card内部，.card高度 = 内容高度 +2rem（上下 margin），因此视觉上明显“撑高”。
? 补充验证：即使不使用 Flex，给
.card添加border: 1px solid transparent或padding: 1px同样可触发 BFC，达到相同效果——这进一步证明问题本质是 BFC 缺失，而非 Flex 特有行为。
? 推荐解决方案：用 padding 替代 margin（最佳实践）
依赖 BFC 来“兜住” margin 是间接且易混淆的方案。更清晰、可控、符合语义的设计是：
-
将外边距（margin）逻辑移至父容器内部，改用内边距（padding）
这样高度计算直观稳定，不依赖上下文，且完全规避塌陷风险。
/* ✅ 推荐：用 padding 实现间距，语义清晰、行为确定 */
.cards-container {
background-color: #e8e8e8;
}
.card {
width: 250px;
/* height: fit-content; ← 可省略，默认即自适应 */
border-radius: 30px;
background-color: white;
padding: 1rem; /* ← 关键：用 padding 代替子元素的 margin */
box-sizing: border-box; /* 确保 padding 不增加总宽高 */
}
/* 子元素不再需要上下 margin */
.card > .card-bottom-container {
margin: 0; /* 清除原 margin */
gap: 1rem;
}<div class="cards-container">
<div class="card">
<!-- padding 已提供外围空间，内部结构更干净 -->
<div class="card-bottom-container">
<div class="card-tags-container">
<a href="/path-1" class="card-tag"></a>
<!-- ... -->
</div>
</div>
</div>
</div>⚠️ 注意事项与延伸提醒
-
height: fit-content并非必需：现代浏览器中，块级元素（包括 flex item）默认高度即由内容决定；显式声明反而可能在旧版 Safari 中引发兼容性问题。 - Flex 容器的
align-items: stretch是默认值：若.card未设高度，它不会被拉伸；高度变化纯粹源于 margin 是否被包含。 - 调试技巧：临时添加
outline: 1px solid red到.card和.card-bottom-container，可直观观察真实盒模型边界与 margin 占位。 - 深层原则：布局稳定性优先于“技巧性修复”。用
padding定义容器内部留白，用margin控制容器间关系——这是 CSS 布局的黄金分工。
掌握 margin 塌陷与 BFC 的关系，远比记忆“flex 会让子项变高”更有价值。它让你从被动调试转向主动设计，真正驾驭 CSS 布局的底层逻辑。
