為了解決浮動元素引起父元素無法獲得高度的問題，我們一般在子元素的最後加上乙個spacer div（clear:both）。但是ie和mozilla對div的解釋不同引起一些表現上的差異。
在製作網頁的過程中，自適應問題是經常遇到，而又最讓人頭疼的，看了好多種解決的方法，但是都不是萬能的。今天遇到這個問題，實在讓我撓頭，借鑑了 shark的方法，又給了我乙個新思路。當時沒仔細看lbs的樣式表，今天才發現，.clear用的就是這個方法。接下來，我會做個關於「自適應高度」問題的彙總，以便今後遇到問題時候更快解決。
為了解決浮動元素引起父元素無法獲得高度的問題，我們一般在子元素的最後加上乙個spacer div（clear:both）。但是ie和mozilla對div的解釋不同www.cppcns.com引起一些表現上的差異。
最簡單的spacer：
.hackbox
ie可以正確地產生預期的效果，但是在mozilla中不起作用。所以現在很多人是這麼用的
.hackbox
然後xhtml中加入乙個 ；，如下：
這回ie和mozilla都起作用了，但是ie並不認 height:0; 這個規則，結果ie中的這個spacer div就佔了一定的高度，影響布局。
經過n次實驗，我發現用下面的方法能比較完美的解決這個問題。
.hackbox
其實ie只需要有clear:both;這一條就可以實現我們的要求。那麼下面這兩條規則有什麼用呢？
border-top:1px solid transparent;
margin-top:-1px;
第一條規則產生1px的乙個透明的上邊框，第二條將margin-top設定為-1，以抵消這條邊框對布局產生的影響。
但是不幸的是ie不支援transparent這個值，它會將這條邊框變為黑色-_-
不幸中的萬幸是ie這小子還有乙個不支援的值，就是!important，i程式設計客棧e會忽略這它而選擇按後面兩條顯示，結果就是不顯示邊框（也就是只有clear:both;起作用了）。而mozilla卻會按!importan程式設計客棧t指出的規則顯示。
本文標題: .clear方法解決網頁自適應高度的問題
本文位址: /web/css/26657.html
網頁自適應
1.文件 允許網頁寬度自動調整 網頁的原始比例即為螢幕的大小，ie9 viewport元標籤 網頁的預設寬度，width device width,是說網頁的初始寬度等於螢幕的寬度，initial scale 1,縮放比例為1倍 相容ie老版本需要支援 2.載入css css3 media quer...
網頁自適應
文章入口 自適應 使用 viewport 標籤 viewport 是網頁預設的寬度和高度，上面這行 的意思是，網頁寬度預設等於螢幕寬度 width device width 原始縮放比例 initial scale 1 為1.0，即網頁初始大小佔螢幕面積的100 使用 百分比 或 em 要變化的不宜...
網頁自適應
允許網頁寬度自動調整 自適應網頁設計 到底是怎麼做到的？其實並不難。首先，在網頁 的頭部，加入一行viewport元標籤。viewport是網頁預設的寬度和高度，上面這行 的意思是，網頁寬度預設等於螢幕寬度 width device width 原始縮放比例 initial scale 1 為1.0...