CSS布局可以讓我們輕松地設置網頁的樣式。然而，當父親元素的高度不夠容納子元素時，就需要用一些技巧來解決。那么，要如何用CSS撐開父親元素呢？

.parent {
height: auto;
overflow: hidden;
}
.child {
height: 100px;
margin-bottom: 10px;
}

以上代碼是一種常見的解決方法。父親元素設置height為auto，將高度設置為子元素的高度之和。但是，在這種情況下，子元素會溢出父親元素。因此，需要使用overflow: hidden隱藏子元素的部分，從而撐開父親元素。

除此之外，還有另一種常見的解決方法——使用float屬性。通過將子元素浮動，可以讓它們“脫離文檔流”，不再撐開父親元素。而使用clear屬性，可以讓父親元素識別浮動元素，從而正確地計算高度。

.parent {
overflow: hidden;
}
.child {
height: 100px;
margin-bottom: 10px;
float: left;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}

以上代碼中，使用overflow: hidden隱藏了浮動元素，而clearfix類的::after偽元素則用來清空浮動。這樣，就能夠撐開父親元素了。

CSS撐開父親元素，需要我們掌握一些技巧和常見的解決方法。無論是使用overflow屬性還是浮動元素，都是很好的選擇。相信掌握了這些技巧后，您能夠更好地掌握CSS的布局技術，制作出優美的網頁。