CSS的clear屬性

標籤：style   blog   http   color   ar   strong   sp   div   2014   

以下引用自w3school

clear 屬性定義了元素的哪邊上不允許出現浮動元素。在 CSS1 和 CSS2 中，這是通過自動為清除元素（即設定了 clear 屬性的元素）增加上外邊距實現的。在 CSS2.1 中，會在元素上外邊距之上增加清除空間，而外邊距本身並不改變。不論哪一種改變，最終結果都一樣，如果聲明為左邊或右邊清除，會使元素的上外邊框邊界剛好在該邊上浮動元素的下外邊距邊界之下。

 

值	描述
left	在左側不允許浮動元素。
right	在右側不允許浮動元素。
both	在左右兩側均不允許浮動元素。
none	預設值。允許浮動元素出現在兩側。
inherit	規定應該從父元素繼承 clear 屬性的值。

 

 

 

 

 

情況一：DIV1 （灰）左浮動 DIV2（藍） 右浮動

#div1{ float: left; width: 200px; height: 200px; background-color: #ccc; }#div2{ float: right; width: 200px; height: 200px; background-color: #0088cc; }

 

DIV2用clear:left 時，清除浮動做效果

 

DIV1 clear:right 或 clear:both ，清除不了右浮動。

 

情況二：DIV1 右浮動 DIV2 右浮動

#div1{ float: right; width: 200px;height: 200px;background-color: #ccc; }#div2{ float: right; width: 200px;height: 200px;background-color: #0088cc;}

 

DIV2 clear:right; 清除了右邊的浮動

 DIV1 clear:right 或 clear:both ， 清除不了右邊浮動

 

 情況三：DIV1右浮動 DIV2左浮動

#div1{ float: right; width: 200px;height: 200px;background-color: #ccc; }#div2{ float: left; width: 200px;height: 200px;background-color: #0088cc; }

DIV2 clear:right ，清除了右浮動

DIV1 clear:left 或 clear:both ，清除不了左浮動

 

情況四：DIV1左浮動 DIV2左浮動

#div1{ float: left; width: 200px;height: 200px;background-color: #ccc; }#div2{ float: left; width: 200px;height: 200px;background-color: #0088cc; }

當DIV1用 clear：right 時，清除不了浮動，當DIV2用 clear:left 時，清除左邊浮動

結論：

clear是基於頂部邊界發生清除。本例DIV1的頂部沒有其他標籤，無論用clear的任何方向都清除不了DIV2的浮動。而下一個元素DIV2可以判斷上一個元素是否發生浮動，排列靠後的標籤因清除浮動移至下面。

 

CSS的clear屬性