CSS清除浮動小例子

在CSS中，清除浮動是一個非常常見的需求，浮動元素會脫離文檔流，對其他元素產(chǎn)生影響，因此我們需要一種方法來清除浮動。

下面是一個簡單的例子，展示了如何使用CSS來清除浮動：

HTML代碼：

<div class="float-container">
  <div class="float-item">我是浮動的元素</div>
  <div class="float-item">我是另一個浮動的元素</div>
  <div class="clear-float"></div>
</div>

CSS代碼：

.float-container {
  width: 100%;
}
.float-item {
  float: left;
  width: 50%;
  height: 200px;
  background-color: lightblue;
}
.clear-float {
  clear: both;
}

在這個例子中，我們創(chuàng)建了一個名為float-container的容器，其中包含了兩個浮動的元素float-item，由于這兩個元素是浮動的，它們會脫離文檔流并相互堆疊，為了解決這個問題，我們可以在容器中添加一個名為clear-float的元素，該元素具有clear: both;的樣式，可以清除左右兩個方向的浮動。

通過這個簡單的方法，我們可以輕松地清除浮動元素對其他元素產(chǎn)生的影響，使頁面布局更加穩(wěn)定和可控。