.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又會 產生一個浮動。
<html>,<body>,<table><tr><th><td><img><hr><input>, <button>, <select>, <textarea>, <fieldset>, <legend><iframe>, <embed>, <object>, <applet><marquee>
下列 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 的話：
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-width, mid-height 設為它們的預設值”0″仍然會賦予 hasLayout，但是 IE 7 卻可以接受一個不合法的屬性”auto”來重設 hasLayout。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
