在 HTML 頁(yè)面中，有時(shí)候我們會(huì)遇到一些元素高度無法自適應(yīng)的情況，這就是所謂的塌陷現(xiàn)象，解決塌陷問題是前端開發(fā)中經(jīng)常遇到的問題。下面，介紹幾種 CSS 解決塌陷的方法。

<div>
<p>內(nèi)容</p>
<div style="clear: both"></div>
</div>

方法一：使用 clear 屬性

通過在浮動(dòng)元素的父元素后添加一個(gè)空白 div 元素，并設(shè)置其 clear 屬性為 both，可以清除浮動(dòng)元素帶來的影響，從而解決塌陷問題。

<div style="overflow: hidden">
<p>內(nèi)容</p>
</div>

方法二：使用 overflow 屬性

通過在元素的父元素中添加一個(gè)具有 overflow 屬性的 div、p 等元素，可以使浮動(dòng)產(chǎn)生的元素都在父元素中顯示出來，從而解決塌陷問題。

<div style="display: table;">
<p style="display: table-cell">內(nèi)容</p>
</div>

方法三：使用 table 屬性

通過設(shè)置元素的 display 屬性為 table 或 table-cell，可以將元素和其它兄弟元素一起顯示出來，從而解決塌陷問題。特別地，這種方法不容易引起樣式問題，效果非常穩(wěn)定。

綜上所述，在實(shí)際開發(fā)中，如果遇到塌陷問題，可以通過以上三種方法解決，選擇合適的方法可以使頁(yè)面效果更加優(yōu)秀。