设置 max-width: 100% 和 height: auto 可使浮动容器内图片高度自适应；配合 clearfix 清除浮动避免父元素塌陷；推荐使用 Flexbox 等现代布局替代传统浮动实现响应式设计。
浮动元素内的图片高度自适应，关键在于理解CSS盒模型和浮动布局的特性。当图片被包含在浮动容器中时，其尺寸行为会受到父元素宽度、图片自身属性以及CSS设置的影响。通过合理设置样式，可以让图片在不同屏幕或容器尺寸下自动调整高度，保持比例不失真。
理解浮动容器对图片的影响
当一个元素设置了 float: left; 或 float: right;，它会脱离标准文档流，其内容将围绕其他非浮动元素排列。如果图片位于浮动容器内，它的显示效果依赖于容器的宽度和图片的尺寸设置。
常见问题包括：
- 图片超出容器边界
- 高度未随宽度缩放导致变形
- 父元素因浮动造成高度塌陷
解决这些问题需要结合盒模型控制和响应式技巧。
立即学习“前端免费学习笔记（深入）”；
使用 max-width 实现图片自适应
让图片在浮动容器中高度自适应的核心方法是设置 max-width: 100%; 并配合 height: auto;。这样图片宽度不会超过父容器，同时高度按原始比例缩放。
img {max-width: 100%;
height: auto;
display: block;
}
其中 display: block; 可避免图片下方出现意外空白（由默认的 inline 基线对齐引起）。
防止父容器高度塌陷
由于浮动元素脱离文档流，可能导致父容器无法正确包裹内容，从而出现高度塌陷，影响布局。可通过以下方式清除浮动：
- 使用 overflow: hidden; 触发BFC（块级格式化上下文）
- 添加伪元素清除法：
.clearfix::after {
content: "";
display: table;
clear: both;
} - 给父容器也设置浮动（不推荐，可能引发连锁问题）
推荐使用 clearfix 类，结构清晰且兼容性好。
结合现代布局替代传统浮动
虽然浮动曾广泛用于图文环绕和多列布局，但现在更推荐使用 Flexbox 或 Grid 实现类似效果。它们天然支持内容自适应，无需手动清除浮动。
例如用 Flex 实现左右图文：
.container {display: flex;
align-items: center;
}
.container img {
max-width: 100%;
height: auto;
}
这种方式更简洁，且能自动处理高度与对齐问题。
基本上就这些。掌握盒模型、合理设置图片样式，并正确处理浮动影响，就能让浮动容器中的图片高度自然适配。虽然浮动仍有应用场景，但在新项目中可优先考虑现代布局方案。
