CSS中有許多方法可以撐起父元素的高度，本文將逐一介紹。

1. 使用清除浮動(dòng)

通常情況下，一個(gè)父元素內(nèi)部包含浮動(dòng)元素，將導(dǎo)致父元素高度塌陷。解決這個(gè)問(wèn)題的方法是在父元素內(nèi)部的最后一個(gè)浮動(dòng)元素后插入一個(gè)元素并為該元素設(shè)置clear: both屬性。這樣父元素的高度就會(huì)根據(jù)浮動(dòng)元素的高度自動(dòng)適應(yīng)。

.parent {
overflow: hidden;
}
.float-left {
float: left;
}
.clear {
clear: both;
}

2. 使用flex布局

flex布局是CSS3新增的一種強(qiáng)大的布局方式，可以方便地解決父元素高度無(wú)法自適應(yīng)的問(wèn)題。

.parent {
display: flex;
}
.child {
flex: 1;
}

3. 使用grid布局

grid布局也是CSS3新增的一種布局方式，可以將父元素分成多個(gè)網(wǎng)格，方便地控制子元素在網(wǎng)格中的布局。

.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
.child {
grid-row: 2;
}

4. 使用偽元素

在父元素內(nèi)部插入一個(gè)偽元素，然后為偽元素設(shè)置clear: both屬性，可以解決父元素高度塌陷的問(wèn)題。

.parent {
position: relative;
}
.parent::before {
content: '';
display: block;
clear: both;
}

以上就是CSS撐起父元素高度的一些常用方法，根據(jù)實(shí)際情況選擇合適的方法可以使頁(yè)面布局變得更加穩(wěn)定和美觀(guān)。