在網頁布局中，經常會遇到CSS高度塌陷的問題。具體表現為元素因為沒有內容而呈現0高度，給頁面設計和開發帶來很多麻煩。

.content{
border: 1px solid #ccc;
margin-top: 20px;
padding: 10px;
//錯誤的方式
height: 0;
}

在上述代碼中，.content元素顯然沒有內容，加上height:0就會使該元素高度變為0，造成高度塌陷。這時候，如何解決？

.content{
border: 1px solid #ccc;
margin-top: 20px;
padding: 10px;
display: flex;
flex-direction: column;
}

通過把display屬性改成flex，并且添加flex-direction:column;，就可以使該元素在沒有內容時也會把邊框和padding占滿，不會出現高度塌陷的問題。

當然，還有其他解決高度塌陷的方法，比如添加一個空格或者一個占位符來撐開元素高度，或者使用min-height屬性等等，具體可以根據實際情況來選擇。