學習 CSS 版面配置
若想控制 float 元素的行為，了解 clear 屬性是非常重要的，請比較以下兩個例子：
<div class="box">...</div>
<section>...</section>.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
我感覺好像我在漂浮！
</div>
這個例子的 section 元素實際上是在 div 之後，然而因為 div 元素會浮動到左邊，所以變成了這樣：這個 section 元素的內容漂浮在 div 旁邊，並且 section 元素反而把所有東西包起來了。如果我們想讓 section 出現在這些 float 元素之後呢？
.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
.after-box {
clear: left;
}
我感覺好像我在漂浮！
</div>
使用 clear 我們就可以將這個 section 區塊移到浮動元素 div 的下方，你可以在這個 section 元素加上一個 clear: left; 來宣告清空所有標示 float: left; 的元素，也可以用 clear: right; 或 clear: both; 來清空 float: right; 或同時清除 float: left 與 float: right 的浮動元素。
