clear:both; 用法 什麼時候用

clear:both; 

CSS手冊上這樣解釋的：該屬性的值指出了不允許有浮動對象的邊。 

這個屬性是用來控制float屬性在文檔流的實體位置的。 

當屬性設定float（浮動）時，他所在的實體位置已經脫離文檔流了，但是大多時候我們希望文檔流能識别float（浮動）,或者是希望float（浮動）後面的元素不被float（浮動）所影響，這個時候我們就需要用clear:both;來清除clear:both; 

例子： 

<p style="float:left;width :100px;">這個是第1列，</p> 

<p style="float:left;width :400px;">這個是第2列，</p> 

<p >這個是列的下面。</p> 

如果不用清除浮動，那麼第3個<P>的文字就會和第一二行在一起 

是以我們在第3個這利加一個清除浮動。 

<p clear:both;>這個是列的下面。</p>

CSS中 clear:both;可以終結在出現他之前的浮動 CSS中 clear:both;可以終結在出現他之前的浮動

文法： clear : none | left |right | both

參數：

說明： 該屬性的值指出了不允許有浮動對象的邊。請參閱float屬性。 對應的腳本特性為clear

示例：

div { clear : left }

img { float: right }

<div style="clear:both;"></div>

主要是用在div套div的結構中。如果内div是浮動的，一般都需要clear浮動，不然的話内div會超出外div的架構

所用什麼時候用clear:both;就很重要,一般我們在需要清除浮動的時候用到clear:both;不要輕意用到clear:both;因為它也有副伯用.

我們寫一個clear:both;的例子:

<div style="float:left;width:100px;"> clear:both第1行第1列，</div> 

<div style="float:left;width:700px;"> clear:both第1行第2列，</div> 

<div style="clear:both;"> clear:both第2行。</div>

效果:

clear:both第1行第1列，

clear:both第1行第2列，

clear:both第2行。

作者：沐雪