css父盒子设置高度，子盒子没设置高度，怎么让子不继承父高度

当你在CSS中有一个父元素设置了固定的高度，而它的子元素没有明确设置高度时，子元素通常会默认继承父元素的高度。如果你想让子元素不完全继承父元素的高度，有几种方法可以尝试：

1. **浮动** (Float)：将子元素浮动起来，它不再占据原来的位置，也不会影响父元素的高度。不过，这可能导致布局问题，需要额外清除浮动。

.parent {
  height: 100px; /* 父元素高度 */
}
.child {
  float: left; /* 或者 right */
  height: auto; /* 子元素高度自动 */
}
.clearfix::after { /* 清除浮动 */
  content: "";
  display: table;
  clear: both;
}

2. **设置`overflow`属性**：如果子元素内容溢出父元素，你可以设置`overflow`为`auto`或`scroll`，使其不会继承高度，并显示滚动条。

.parent {
  height: 100px;
  overflow: auto; /* 避免子元素继承高度 */
}
.child {
  height: inherit; /* 如果需要，可以让子元素的最小高度与父元素一致 */
}

3. **使用`display: flex`或`grid`布局**：弹性布局（flexbox）或网格布局（grid）可以让你控制子元素的高度独立于父元素。

.parent {
  display: flex; /* 或 display: grid; */
  height: 100px;
}
.child {
  flex-grow: 1; /* 或 grid-row: 1 / auto; */
  /* 子元素高度将按需分配空间 */
}

记住，每种方法都适用于不同的场景，选择最适合你的布局需求的方式。