当图片嵌套在 flex 布局的固定高度导航栏（如 height: 160px）中时，因默认行内替换元素特性及未重置的垂直对齐行为，可能导致内容高度超出容器；需通过设置 img 的 vertical-align、max-height 或 flex 项目对齐策略来约束尺寸。
当图片嵌套在 flex 布局的固定高度导航栏（如 height: 160px）中时，因默认行内替换元素特性及未重置的垂直对齐行为，可能导致内容高度超出容器；需通过设置 img 的 vertical-align、max-height 或 flex 项目对齐策略来约束尺寸。
在您提供的代码中，.nav-bar 被设为 height: 160px 并应用了 display: flex（假设 .flex 类定义了 display: flex），但图片仍溢出，根本原因并非“需要加 clear: both”（该方案针对浮动布局，而 Flex 布局中 clear 完全无效），而是以下两个关键问题：
-
<img alt="如何解决图片在 Flex 容器中溢出父级导航栏的问题" >是行内替换元素：默认vertical-align: baseline，会在底部预留约 4–5px 的基线间隙（用于容纳字母如 g、y 的下伸部分），导致父容器实际占用高度 > 图片自身高度； -
未限制图片尺寸：即使图片源尺寸小（如 20×20），若未显式设置
max-height、height或object-fit，且父容器未启用align-items: center，其基线对齐会破坏高度控制。
✅ 正确解决方案如下（推荐组合使用）：
① 重置图片垂直对齐方式（最简有效）
.header-img img {
vertical-align: middle; /* 或 top / bottom */
}② 约束图片尺寸并居中对齐
.nav-bar {
display: flex;
align-items: center; /* 垂直居中所有子项，消除基线间隙影响 */
height: 160px;
/* 其他样式保持不变 */
}
.header-img img {
max-height: 80px; /* 确保不超过 nav-bar 高度的一半 */
height: auto; /* 保持宽高比 */
width: auto;
}③ （可选）增强健壮性：为 .header-img 设置内边距或最小尺寸
.header-img {
padding: 8px; /* 提供呼吸空间 */
box-sizing: border-box;
}⚠️ 注意事项：
-
clear: both对 Flex 容器完全无效，它仅作用于浮动元素（float），在 Flex 或 Grid 布局中应被忽略； - 不要依赖未声明的
.flex类 —— 务必确认其包含display: flex，否则 Flex 行为不会生效； - 若使用响应式设计，建议配合
@media为小屏幕缩小max-height或调整font-size（影响行高间接影响基线）； - 推荐统一用
align-items: center+vertical-align: middle双保险，兼顾语义与兼容性。
总结：Flex 布局中图片溢出的本质是行内元素基线对齐与未约束尺寸的叠加效应。只需两行 CSS（align-items: center 和 vertical-align: middle），即可精准控制高度，无需 hack 或无效属性。
