[分享]css元素子元素高度撑起父元素

.parent{ border: 1px solid blue; height: auto; } .child{ height: 50px; background-color: red; }

在CSS中，元素之间存在着一定的父子关系，子元素的高度也可以撑起父元素的高度。具体实现如下：

 // HTML结构
  <div class="parent">
    <div class="child"></div>
  </div>

  // CSS样式
  .parent{
    border: 1px solid blue;
    height: auto; // 必须设置为auto，才能撑起高度
  }

  .child{
    height: 50px; // 子元素的高度
    background-color: red;
  } 

以上代码中，我们通过给子元素设置height属性，来实现撑起父元素高度的效果。同时，父元素的高度也必须设置为auto，来允许子元素以内容的高度来撑起父元素的高度。

需要注意的是，子元素的高度不能设置为百分比，因为百分比是相对于父元素的，这样会导致父元素高度与子元素无法对齐。

总之，在进行CSS布局的过程中，使用元素的父子关系来撑起高度，是一种方便、实用的方式。