關於 clear 屬性

若想控制 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: leftfloat: right 的浮動元素。

</section>

  • Creative Commons License