简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > css教學 > 主體

css float 清除浮動 haslayout

巴扎黑
發布： 2017-06-28 10:38:04
原創
1559 人瀏覽過

1：float使得指定元素脫離普通的文檔流而產生的特別的佈局特性。它必須應用在區塊級元素之上，也就是說浮動並不應用於內聯標籤。當應用了float那麼這個元素將被指定為區塊級元素。例如一個內聯元素設定了float之後就可以給它設定寬高。 

.clear:after{
content:" ";
display:block;
height:0;
clear:both;
visibility:hidden;
}
登入後複製

:after 偽元素在元素之後添加內容,這個偽元素允許創作人員在元素內容的最後面插入生成內容。預設地，這個偽元素是行內元素，不過可以使用屬性 display 來改變這一點。用after產生的內容是個空格，先display:block,然後高度為0，不讓他影響佈局,隱藏和height:0差不多就是不要影響佈局。 clear:both就是清除 浮動.不支援after的瀏覽器ie6、ie7就是加一個height:1%;就ok了,這樣的話ie6,ie7就會擁有haslayout。

2:haslayput

其實haslayout 是Windows Internet Explorer7以下渲染引擎的一個內部組成部分,

#在InternetExplorer7以下中，一個元素要麼自己對自身的內容進行計算大小和組織，要麼依賴父元素來計算尺寸和組織內容。為了調節這兩個不同的概念，渲染引擎採用了 hasLayout 的屬性，屬性值可以是true或false。當一個元素的 hasLayout屬性值為true時，我們說這個元素有一個佈局（layout）。當一個元素有一個佈局時，它負責對自己和可能的子孫元素進行尺寸計算 和定位。簡單來說，而不是依賴祖先元素來完成這些工作。透過 IE Developer Toolbar 可以查看 IE 下 HTML元素是否擁有haslayout，擁有 haslayout的元素，通常顯示為「haslayout = -1」。

這裡的has layout就是對自己和可能的子孫元素進行尺寸計算和定位來決定父元素的高度，也就是父元素適應了裡面內容的高度，這回大家就明白為什麼加入一個height :1%的原因了，當然也可以加入其它的屬性使其has layout，如width等。當然加上float也可以（float也可以觸發layout），但不推薦，不要用floa來清除浮動，這樣float又會 產生一個浮動。

,,#

th>
,