清除float效果──CSS的clear屬性

 如果想控制float元素的排版，了解clear屬性是十分重要的，兩者可謂息息相關。

可能的值有：

left：消除左邊的浮動

right：消除右邊的浮動

both：消除左右兩邊的浮動

none：預設值，不消除任何一邊的浮動

inherit：繼承浮動，IE未支持此屬性值

其中尤以both最常被使用，因為當我們使用float元素時，由於區塊是浮動的，所以若下一個區塊未使用float屬性的話，可能在排版上會往上跑，造成跑版的現象，而使用clear:both可以適當地解決這個問題。

請先看以下範例：

 前兩個區塊都使用了float:left，然而第三塊(紫色)未使用浮動，因此區塊往上跑被擋在第一塊的下方。

再看以下範例：

 在兩個float區塊後面加上clear:both，如此一來便清除了上面的浮動，下面的內容就不會因為float屬性而受到影響。