關於本站

若想控制 float 元素的行為，了解 clear 屬性是非常重要的，請比較以下兩個例子：

<div class="box">...</div>
<section>...</section>
.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}

<div class="box">

我感覺好像我在漂浮！

</div>
<section>

這個例子的 section 元素實際上是在 div 之後，然而因為 div 元素會浮動到左邊，所以變成了這樣：這個 section 元素的內容漂浮在 div 旁邊，並且 section 元素反而把所有東西包起來了。如果我們想讓 section 出現在這些 float 元素之後呢？

</section>

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}

<div class="box">

我感覺好像我在漂浮！

</div>
<section class="after-box">

使用 clear 我們就可以將這個 section 區塊移到浮動元素 div 的下方，你可以在這個 section 元素加上一個 clear: left; 來宣告清空所有標示 float: left; 的元素，也可以用 clear: right; 或 clear: both; 來清空 float: right; 或同時清除 float: left 與 float: right 的浮動元素。

</section>