IE5.X和IE6在怪異模式中使用自己的非標準框模型。這些瀏覽器的width屬性是內容、填充和邊框的寬度總和。
目前最好的解決方案是迴避這個問題，也就是，不給元素添加具有指定寬度的填充，而是嘗試將填充或空白邊添加到元素的父元素或子元素中。
空白邊疊加
在實踐中隊網頁進行佈局時，當兩個垂直空白邊相遇時，他們將形成一個空白邊。這個空白邊的高度等於兩個發生疊加的空白邊的高度中較大者。
當一個元素包含在另一個元素中時（假設沒有填充或邊框將空白邊分隔開），它們的頂和/或底空白邊也發生疊加
空白邊甚至可以與本身發生疊加。假設一個空元素，它有空白邊，但是沒有邊框或填充。這種情況下，頂空白邊與底空白邊就碰到一起，會發生疊加。
如果這個空白邊碰到另一個元素的空白邊，它還會發生疊加。
只有普通文檔流中塊框的垂直空白邊纔會發生空白邊疊加。行內框、浮動框或絕對定位框之間的空白邊不會疊加。
定位概述
p、h1或div等元素常常成爲塊級元素。顯示爲一塊內容，即塊框。
strong和span等元素成爲行內元素。內容顯示在行內，即行內框。
可以使用display屬性改變生成德框的類型。
通過將display屬性設置爲block，可以讓行內元素（比如錨）表現得像塊級元素一樣。
將display屬性設置爲none，讓生成德元素沒有框，及其內容不再顯示，不佔用文檔中的空間。
CSS中有三種基本的定位機制：普通流、浮動和絕對定位。除非專門制定，否則所有框都在普通流中定位。普通流中的元素框的位置由元素在html中的位置決定。
塊級框從上到下一個接一個地排列；框之間的垂直距離由框的垂直空白邊計算出來。
行內框在一行中水平佈置。可以使用水平填充、邊框和空白邊調整它們的水平間距。但是，垂直填充、邊框和空白邊不影響行內框的高度。
由一行形成的水平框稱爲行框，行框的高度總是足以容納它包含的所有行內框。但是，設置行高可以增加這個框的高度。
將一些文本添加到一個塊級元素（如div）的開頭時。即使沒有把這些文本定義爲段落，也會被當做段落對待。
<div>
Some text
<p>Some more text</p>
</div>
這個框被稱爲無名塊框，因爲它不與專門定義的元素相關聯。
假設有一個包含三行文本的段落。每行文本形成一個無名行框。無法直接對無名塊或行框應用樣式，因爲沒有可以應用樣式的地方。
相對定位
使用相對定位時，無論是否進行移動，元素仍然佔據原來的空間。因此，移動元素會導致它覆蓋其他框。
相對定位實際上被看做普通流定位模型的一部分，因爲元素的位置相對於它在普通流中的位置。
絕對定位
絕對定位使元素的位置與文檔流無關，因此不佔據空間。普通文檔流中其他元素的佈局就像絕對定位的元素不存在時一樣。
絕對定位的元素的位置相對於最近的已定位祖先元素，那麼它的位置相對於最初的包含塊。根據用戶代理的不同，最初的包含塊可能是畫布或HTML教程元素。
因爲絕對定位的框與文檔流無關，所以他們可以覆蓋頁面上的其他元素。可以通過z-index屬性來控制這些框的堆放次序。z-index的值越高，位置就越高。
絕對定位的元素的位置相對於最近的已定位祖先元素，使我們可以做出一些效果。例如，假設希望讓一個文本段落對準一個大框的右下角。只需對包含框進行相對定位，然後相對於這個框對段落進行絕對定位：
#branding {
width: 700px;
height: 100px;
position: relative;
}
#branding .tel {
position: absolute;
right: 500px;
bottom: 10px;
text-align: right;
}
<div id="branding">
<p class="tel">Tel:13154646546546</p>
</div>
在IE5.5和IE6中有一個bug，如果試圖相對於相對定位的框的右邊或底部設置絕對定位的框的位置，那麼需要確保相對定位的框已經設置了尺寸。如果沒有，那麼IE會相對於畫布定位這個框。
上例中如果不設置position： relative，IE8.0依然會相對於畫布定位tel的框。
固定定位是絕對定位的一個子類別，差異在於固定元素的包含塊是視口。能夠創建總是出現在窗口中相同位置的浮動元素。
浮動
浮動框不在文檔的普通流中，可以左右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊緣。
浮動和flear
浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框。實際上，創建浮動框使文本可以圍繞圖像。
要想阻止行框圍繞在浮動框的外邊，需要對這個行框應用clear（值：left、right、both或none），表示框的哪些邊不挨着浮動框。clear在被清理元素的頂空白邊上面添加足夠的空間，使元素的頂邊緣垂直下降到浮動框下面。爲前門的浮動元素留出垂直空間。
讓周圍的元素爲浮動元素留出空間。解決了絕對定位的問題，即框的垂直高度改變不影響周圍元素，會破壞設計的問題。
假設有一個圖片，希望讓它浮動到一個文本塊的左邊。希望將這個圖片和文本包含在另一個具有背景顏色和邊框的元素中：
#news {
background-color: gray;
border: solid 1px black;
}
#news img {
float: left;
}
#news p {
float: right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>Some text</p>
</div>
但是，因爲浮動文本脫離了文檔流，所以包圍圖片和文本的div不佔據空間。
我們需要添加clear元素使，容器包括他們。
.clear {
clear: both;
}
<div class="news">
<img src="news-pic.jpg" />
<p>Some text</p>
<div class="clear"></div>
</div>
一些人適用CSS生成德內容或JavaScript對浮動元素進行清理。並不直接向標記中添加進行清理的元素，而是將它動態地添加到頁面中。對於這兩種方法要指定進行清理的元素該出現在哪裏，常常要添加一個類名
<div class="news clear">
<img src="news-pic.jpg" />
<p>Some text</p>
</div>
在使用CSS方法時，結合適用：after僞類和內容聲明在指定的現有內容的末尾添加新的內容。不希望新內容佔據垂直空間或者在頁面上顯示，將height設置爲0，將visibility設置爲hidden。因爲被清理的元素在它們的頂空白邊上添加空間，所以生產的內容需要將它的display屬性設置爲block。
.clear :after {
content: ".";
height: 0;
visibility: hidden;
display: block;
clear: both;
}
這個方法在大多數現代瀏覽器中是有效的，但是在IE6和更低版本中不起作用。
最常用的解決方案涉及適用Holly招數，迫使IE5-6應用“佈局”和不正確的清理浮動元素。
.clear {display: inline-block;}
/*Holly Hack Targets IE Win only*/
* html .clear {height:1%;}
.clear {display: block;}
/*End Holly Hack*/