外層box自動計算高度的問題
根據W3C定義，沒有float屬性的外層box不會自動計算高度，要計算高度，必須在內層最後一個box加入clear:both。
Opera、netscape、mozilla等不會計算外層box高度，但是微軟IE6會自動計算外層高度。比如：
- "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd">
- <HtmlXMLnsHtmlXMLns="http://www.w3.org/1999/xHtml">
- <head>
- <metahttp-equivmetahttp-equiv="Content-Type"content="text/Html;charset=gb2312"/>
- <title>www.webjx.comtitle>
- <style>
- .outer{
- width:600px;
- background:#000;
- }
- .inner1{
- float:left;
- width:200px;
- height:100px;
- margin:5px;
- background:red;
- }
- .inner2{
- float:left;
- width:200px;
- height:100px;
- margin:5px;
- background:yellow;
- }
- style>
- head>
- <body>
- <divclassdivclass="outer">
- <divclassdivclass="inner1">div>
- <divclassdivclass="inner2">div>
- div>
- body>
- Html>
上面的代碼在IE中有黑色的背景，但是沒有正確的計算上下的margin，在inner2下面加上一個包含clear:both屬性的div後，可以正確計算margin。但是Firefox中仍然沒有黑色背景，通常的解決辦法是定義一下clear:both這個div的高度，或者插入全角空格，這樣就必須增加額外的高度。網上一種比較好的解決辦法是在外層div中加入overflow屬性，同時使用clear:both，這樣就不會增加額外的高度了。如下：
- "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd">
- <HtmlXMLnsHtmlXMLns="http://www.w3.org/1999/xHtml">
- <head>
- <metahttp-equivmetahttp-equiv="Content-Type"content="text/Html;charset=gb2312"/>
- <title>www.webjx.comtitle>
- <style>
- .outer{
- width:600px;
- background:#000;
- overflow:auto;
- }
- .inner1{
- display:inline;
- float:left;
- width:200px;
- height:100px;
- margin:5px;
- background:red;
- }
- .inner2{
- display:inline;
- float:left;
- width:200px;
- height:100px;
- margin:5px;
- background:yellow;
- }
- .clear{
- clear:both;
- }
- style>
- head>
- <body>
- <divclassdivclass="outer">
- <divclassdivclass="inner1">div>
- <divclassdivclass="inner2">div>
- <divclassdivclass="clear">div>
- div>
- body>
- Html>
因此，外層CSS要定義overflow屬性，內層最後要加上clear屬性。