CSS（Cascading Style Sheets）是一種用于描述網頁樣式的語言，它可以控制 HTML 頁面中各個元素的展示效果。在使用 CSS 進行網頁布局的時候，我們經常會遇到占位置的問題。

.box {
width: 100px;
height: 100px;
margin: 10px;
background-color: red;
float: left;
}
.content {
width: 200px;
height: 200px;
background-color: blue;
}

在上面的代碼中，我們定義了一個寬高為 100px 的紅色盒子和一個寬高為 200px 的藍色盒子。我們希望將這兩個盒子排成一行，可以使用 float 屬性實現。但是，我們會發現藍色盒子會覆蓋在紅色盒子的下面，這是因為浮動元素脫離了文檔流，不再占據原本的位置，導致后面的元素會占據原本該浮動元素所在的位置。

為了解決這個問題，我們可以在浮動元素的父元素上添加“清除浮動”的樣式，讓其重新占據原本該浮動元素所在的位置：

.clearfix::before,
.clearfix::after {
content: "";
display: table;
clear: both;
}
.clearfix {
*zoom: 1;
}

通過添加 clearfix 樣式，我們可以讓父元素重新占據浮動元素的位置，保證頁面布局的正確性。