css float 清除浮動 haslayout

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又會 產生一個浮動。

100db36a723c770d327fc0aef2ce13b1,6c04bd5ca3fcae76e30b72ad730ca86d,#f5d188ed2c074f8b944552db028f98a1a34de1251f0d9fe1e645927f19a896e8b4d429308760b6c2d20d6300079ed38eb6c5a531a458a2e790c1fd6421739d1ca1f02c36ba31691bcfe87b2722de723bth>b6c5a531a458a2e790c1fd6421739d1c30d1d2c3c8c4fd418a3801ebb45a1534d5fd7aea971a85678ba271703566ebfd, bb9345e55eb71822850ff156dfde57c8, 221f08282418e2996498697df914ce4e, 4750256ae76b6b9d804861d8f69e79d3, 2b5469ab79cf842344327415c3b3bb95, e911751791aa3ba95dc724e2fb905976d5ba1642137c3f32f4f4493ae923989c, d8e2720730be5ddc9c2a3782839e8eb6, 273238ce9338fbb04bee6997e5552b95, <e>, d8e2720730be5ddc9c2a3782839e8eb6, 273238ce9338fbb04bee6997e5552b95, ea1769cccf4168fd7dbd1034f76720bb

#下列CSS 屬性與取值將讓一個元素獲得layout：###

• position: absolute
  絕對定位元素的包含區塊(containing block)就會經常在這一方面出問題。

• float: left|right
  由於 layout 元素的特性，浮動模型會有很多怪異的表現。

• display: inline-block
  當一個內聯層級的元素需要layout 的時候往往就要用到它，這也可能也是這個CSS 屬性的唯一效果–讓某個元素擁有layout。 「inline-block行為」在IE中是可以實現的，但非常與眾不同： IE/Win: inline-block and hasLayout 。

• width: 除 “auto” 外的任意值
  很多人遇到 layout 相關問題發生時，一般都會先嘗試用這個來修復。

• height: 除 “auto” 外的任一值
  height: 1% 就在 Holly Hack 中被使用。

• zoom: 除 “normal” 外的任一值
  IE專有屬性。不過 zoom: 1 可以臨時用做調試。

• writing-mode: tb-rl
  MS專有屬性。

• overflow: hidden|scroll|auto
  在 IE7 中，overflow 也變成了 layout 觸發器，這個屬性在先前版本 IE 中沒有觸發 layout 的功能。

• overflow-x|-y: hidden|scroll|auto
  overflow-x 和 overflow-y 是 CSS3 盒子模型中的屬性，尚未得到瀏覽器的廣泛支援。他們在先前版本IE中沒有觸發 layout 的功能。

• 另外IE7 的螢幕上又新添了幾個haslayout 的演員，如果只從hasLayout 這個方面考慮，min/max 和width/height 的表現類似，position 的fixed和absolute 也是一模一樣。

• position: fixed

• #min-width: 任意值
  就算設為0也可以讓該元素獲得 layout。

• max-width: 除「none」之外的任意值

• min-height: 任意值
  即使設為0也可以讓該元素的haslayout=true

• max-height: 除「none」 之外的任意值

有關內聯層級元素

對於內聯元素(可以是預設即為內聯的例如span 元素，也可以是display: inline 的元素)

• width 和height 只在IE5.x 下和IE6 或更新版本的quirks 模式下觸發hasLayout 。而對於 IE6，如果瀏覽器運行於標準相容模式下，內聯元素會忽略 width 或 height 屬性，所以設定 width 或 height 不能在此種情況下下令該元素具有 layout。

• zoom 總是可以觸發 hasLayout，但在 IE5.0 中不支援。

具有」layout」 的元素如果同時也display: inline ，那麼它的行為就和標準中所說的inline-block 很類似了：在段落中和普通文字一樣在水平方向和連續排列，受vertical-align 影響，並且大小可以根據內容自適應調整。這也可以解釋為什麼單單在IE/Win 中內聯元素可以包含區塊級元素而少出問題，因為在別的瀏覽器中display: inline 就是內聯，不像IE/Win 一旦內聯元素擁有layout 還會變成inline-block。

重置hasLayout

在另一個規則中重設以下屬性為預設值將重設(或撤銷)hasLayout，如果沒有其他屬性再新增hasLayout 的話：

• width, height (設為「auto」)

• max-width, max-height (設為「none」)(在IE 7 中)

• position (設為「static」)

• float (設為「none」)

• overflow (設為「visible」) (在IE 7 中)

• zoom (設為「normal」)

• writing-mode (從“tb-rl” 設為“lr-t)

display 屬性的不同：當用”inline-block”當設定了haslayout = true 時，就算在一條獨立的規則中覆蓋這個屬性為”block”或”inline”，haslayout 這個標誌位也不會被重置為false。 mid-height 設為它們的預設值」0″仍然會賦予hasLayout，但是IE 7 卻可以接受一個不合法的屬性」auto」來重置hasLayout。

以上是css float 清除浮動 haslayout的詳細內容。更多資訊請關注PHP中文網其他相關文章！