CSS串聯樣式表教學clear : both解除元素的浮動

CSS串聯樣式表教學『標籤元素與文字間的相對位置』

    * clear 屬性是用來解除 float 屬性的作用
    * clear : right; /*解除元素置右的浮動*/
    * clear : left; /*解除元素置左的浮動*/
    * clear : both; /*解除元素兩邊的浮動*/
    * clear : nono; /*以預設位置顯示*/

解除 float 浮動的範例
DIV區塊clear運用範例 當我們在元素使用 float 屬性, 因為區塊變成浮動層,下一個區塊可能會往上跑, 例如下:

<style type="text/css">
<!--
#div_a{ float:right;width:200px;border:1px solid #cc0;}
#div_b{ float:left;width:200px;border:1px solid #c60;}
#div_c{ border:1px solid #39c;}
-->
</style>

<div id="div_a"> div_a <br /> div_a <br /> div_a </div>
<div id="div_b"> div_b </div>
<div id="div_c"> div_c </div>

區塊div_a
區塊div_a
區塊div_a
區塊div_b
區塊div_c
我們只需要在第三個區塊 #div_c 加上 clear : both;
就可以解決這個問題

#div_c{border:1px solid #39c;clear : both;}

區塊div_a
區塊div_a
區塊div_a
區塊div_b
區塊div_c
如此一來清除了上面左右浮動的區塊,下方的內容就不會因為 float 而受到影響。