如何避免子元素撑高父元素？

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天米云就整理分享《如何避免子元素撑高父元素？》，聊聊，希望可以帮助到正在努力赚钱的你。

如何避免子元素撑高父元素？

在网页布局中，如何控制子元素对父元素高度的影响是一个常见问题。为了使父元素仅由文字内容撑高，而不是被图片等子元素撑高，我们可以考虑以下纯 css 解决方法：

1. 绝对定位： 将图片子元素设置为绝对定位（position: absolute），使其脱离文档流，就不会对父元素的高度产生影响。

例如，修改 css 为：

.parent {
  border: 1px solid red;
  height: auto;
}

.child-image {
  border: 1px solid black;
  position: absolute;
}

.child-text {
  border: 1px solid black;
}

1. 背景图： 如果子元素是图片，可以考虑将其设置为父元素的背景图（background-image）。虽然部分图片内容可能会被裁切，但可以利用其他 css 属性进行调整。但是，对于此效果图所示情况，背景图可能不适用。

建议使用第一种绝对定位的方法，它更加直接简单。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持米云！更多关于文章的相关知识，也可关注米云公众号。

win10怎么设置护眼豆沙绿 win10护眼豆沙绿设置方法