CSS布局技術的根本是3個基本概念：定位、浮動、外邊距操縱。
只需要設置希望定位的元素的寬度，然后將它們向左或向右浮動。因為浮動的元素不再占據文檔流中的任何空間，它們就不再對包圍他們的塊框產生任何影響，為解決這個問題，1.需要對布局中各個點上的浮動元素進行清理，常見的做法不是連續的浮動和清理元素，而是浮動幾乎所有東西，然后在整個文檔的“戰略點”（比如頁腳）上進行一次或者兩次清理；2.還可以使用溢出方法清理某些元素的內容。
1.兩列的浮動布局
<div class="wrapper">
<div class="content">
<div class="primary"> </div>
<div class="secondary"> </div>
</div>
<div class="footer"> </div>
</div>
一般來說，將兩列都向左浮動，然后使用外邊距或內邊距在兩列之間創建一個隔離帶，使用這種方法，列在可用空間被包的很緊，沒有喘息的空間，若瀏覽器表現良好則沒有問題，但是差勁的瀏覽器會打亂緊密的布局，迫使一列退到另一列的下面，例如在IE上，IE考慮元素內容的尺寸，而不是元素本身的尺寸，標準的瀏覽器中，如果內容太大（可能只是把文本設置為斜體），它只會超出框之外，而IE中整個元素都會擴展，這樣的話在緊密的布局中，沒有足夠的空間可以讓元素并排出現，就會有一個浮動元素退到下面去。
解決方法：不使用水平外邊距或內邊距來建立隔離帶，而是讓一個元素向左浮動，讓另一個向右浮動，從而創建視覺上的隔離，如果一個元素的尺寸增加了，它不會立刻占滿水平空間并下降，而只是擴展到視覺隔離帶中：
代碼實現：
.wrapper{
width:920px;
}
.content .primary{
width : 650px;
padding-right : 20px;// 設置內邊距，避免其包含的文本緊挨著元素的右邊緣
float:right;
display:inline;//用來防止IE中雙外邊距浮動產生的bug
}
.content .secondary{
width:230px;
float:left;
display:inline;//用來防止IE中雙外邊距浮動產生的bug
}
.content{
overflow:hidden;//上述元素是浮動的，不占據文檔流的空間，造成頁腳上升，則需要對父元素content應用溢出方法來清理浮動元素
}
總寬度是920px，代碼的結果是在浮動元素之間有20px的隔離帶，用來防止內容擴展導致浮動元素下降。
2.三列的浮動布局
<div class="content">
<div class="primary">
<div class="primary"> </div>
<div class="secondary"> </div>
</div>
<div class="secondary"> </div>
</div>
方法：其實就是將主內容區域分為兩列，從而形成三列的效果。將次要內容向左浮動，主內容區向右浮動，再在主內容div中，將次要div向右浮動。
.content .primary{
width : 670px;
float:right;
display:inline; //用來防止IE中雙外邊距浮動產生的bug
}
.content .secondary{
width:230px;
float:left;
display:inline; //用來防止IE中雙外邊距浮動產生的bug
}
.content .primary .primary{
width:400px;
float:left;
display:inline;
}
.comtent .primary .secondary{
width:230px;
padding-right:20px; //設置內邊距，避免其包含的文本緊挨著元素的右邊緣
float:right;
display:inline;
}
