CSS中子類撐開父類高度是一個常見的問題。在布局中，通常我們希望父類能夠自適應子元素的高度，而不是被限制在固定的高度范圍內。

一般情況下，父元素的高度是由其子元素的高度決定的。因此，如果我們想要父元素的高度自適應子元素的高度，我們需要使用CSS來實現。

.parent {
border: 1px solid gray;
overflow: hidden;
}
.child {
padding: 10px;
margin-bottom: 10px;
background-color: #ddd;
}

上面的代碼展示了一個簡單的父子元素布局。我們可以看到，父元素有一個邊框，并設置了一個隱藏的overflow屬性。這是因為當子元素超出父元素的高度時，我們不想讓它們溢出到父元素的外部。

子元素特意設置了一些內邊距和外邊距，以便更好地展示布局。在實際應用中，這些值根據具體需求而定。

接下來，我們需要使用CSS來讓父元素自適應子元素的高度。

.parent {
border: 1px solid gray;
overflow: hidden;
}
.child {
padding: 10px;
margin-bottom: 10px;
background-color: #ddd;
float: left;
width: 100%;
box-sizing: border-box;
}

上面的代碼中，我們添加了一些CSS屬性來實現自適應父元素高度的效果。

我們首先將子元素設置為浮動，這是為了讓父元素能夠自適應子元素的高度。接著，我們將子元素的寬度設置為100%。

為了使這一布局生效，我們還需要使用box-sizing屬性將邊框和內邊距計算在內。這意味著子元素的實際寬度將減去邊框和內邊距的大小，從而讓子元素可以放置在父元素中。

最后，我們重新加載界面，就可以看到父元素已經成功地自適應了子元素的高度。