css定位以后父元素高

在使用CSS进行布局的过程中，我们难免会遇到一个问题：子元素使用定位后父元素的高度瞬间变得不确定，这该怎样解决呢？

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 0;
  left: 0;
  /* 其他样式 */
}

在上面的代码中，我们为父元素设置了相对定位，为子元素设置了绝对定位，并让其定位到了父元素的左上角。此时，父元素的高度便无法被子元素撑开，从而导致一定程度上的页面失调。那么，我们应该如何解决这一问题呢？

解决这一问题的方法有很多，下面给出其中两种较为常用的方案：

1. 使用padding

.parent {
  position: relative;
  /* 设置padding */
  padding-bottom: 100px;
}
.child {
  position: absolute;
  top: 0;
  left: 0;
  /* 其他样式 */
}

如上代码所示，我们可以通过在父元素中设置一定的padding值来避免子元素造成的页面布局混乱。当然，这种方法需要我们手动计算父元素应该添加多少padding值才能达到我们想要的效果，稍有不慎便会导致页面出现问题。

2. 使用伪元素

.parent {
  position: relative;
}
.parent::after {
  /* 清除浮动 */
  content: ".";
  clear: both;
  display: block;
  visibility: hidden;
  height: 0;
}
.child {
  position: absolute;
  top: 0;
  left: 0;
  /* 其他样式 */
}

第二种方法则使用了伪元素，通过在父元素中添加一个空的伪元素并将其设置为block元素，然后清除浮动，达到撑开父元素的效果。相比第一种方法，这种方法需要添加的代码量更少，而且更加简洁。

无论我们采用哪种方法，都需要注意到定位元素给页面造成的影响，尽量避免使用这种布局方式来提高页面稳定性。