CSS技巧：让子元素不影响父元素高度
网页设计中，子元素高度常常影响父元素高度。例如，一个父容器包含图片和文字，父容器高度往往被图片撑大。本文介绍纯css方法，让图片高度不影响父容器高度，仅由文字内容决定父容器高度。
上图显示父容器高度被图片撑大。 如何避免这种情况呢？关键在于理解元素如何影响父元素高度：除非父元素高度固定，否则父元素高度会被最高子元素撑开。
因此，要防止图片撑大父容器高度，可以使用以下CSS技巧：
-
绝对定位 (absolute positioning): 将图片使用
absolute定位脱离文档流。这样，父容器高度只受剩余元素（文字）影响。立即学习“前端免费学习笔记（深入）”；
.parent { position: relative; /* 关键：父元素需要相对定位 */ } .child-image { position: absolute; top: 0; left: 0; } -
使用背景图片 (background-image): 将图片设置为父元素的背景图片。这可能会裁剪图片，但可通过CSS属性调整。然而，如果需要图片大小随文字内容变化，此方法并不适用。
绝对定位是解决此问题的简洁有效方法。通过将图片绝对定位，父容器高度将仅由文字内容决定，达到预期效果。
