CSS防止塌陷的技術是一種重要的前端開發技巧。通常當一個元素沒有設置指定的高度，而里面的內容又很多時，就會出現塌陷的現象。這時，我們就需要使用一些技術來避免這種情況的發生。

一個常見的例子是使用float屬性來布局，如果不設置清除浮動，就可能會出現元素塌陷的情況。

.container {
width: 100%;
}
.left {
float: left;
width: 50%;
}
.right {
float: left;
width: 50%;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}

如上所示，設置了一個容器，里面包含兩個浮動元素，卻沒有設置清除浮動，這就容易出現塌陷現象。使用clearfix技術就可以解決這個問題，由于浮動元素脫離了文檔流，使用一個空的::after偽元素來清空浮動就可以保證父容器的高度不會塌陷。

除了clearfix技術外，還可以使用flex布局或者grid布局來避免元素出現高度塌陷的情況，這是現代布局中推薦的方法。

.container {
display: flex;
flex-wrap: wrap;
}
.left {
flex: 1;
}
.right {
flex: 1;
}

如上所示，使用flex布局可以很容易的實現這個布局需求，并避免了塌陷現象。

總之，CSS防止元素出現高度塌陷是一項重要的前端開發技能，需要掌握多種技術來避免這個問題的發生。使用clearfix、flex布局或者grid布局是我們常用的一些技術方法。