在網(wǎng)頁設計中，使用CSS樣式設置網(wǎng)頁中各個元素的樣式是不可避免的。其中，CSS盒子模型是常用的一種布局方式。然而，有時候會發(fā)現(xiàn)盒子被擠下來的情況，下面就來一起探討一下這個問題。

.box {
width: 200px;
height: 200px;
background-color: #ccc;
float: left;
}

以上是一個簡單的CSS盒子的樣式代碼。如果將它放在一個容器中，并且容器的寬度不夠大，就會發(fā)現(xiàn)盒子被擠下來了。

.container {
width: 400px;
height: 200px;
background-color: #eee;
}

這是因為在浮動元素所在的容器中，如果容器寬度不夠大，浮動元素會自動尋找下一行的位置，從而導致盒子被擠下來。

為了解決這個問題，可以使用清除浮動的方法：

.clearfix::after {
content: "";
display: block;
clear: both;
}

以上就是clearfix清除浮動的方法，將其加在父容器上即可解決盒子被擠下來的問題。

總之，在使用CSS盒子模型時，需要留意容器的寬度是否足夠，如果不足夠，就需要使用清除浮動的方法來避免盒子被擠下來的情況。