CSS布局技術(shù)的根本是3個基本概念：定位、浮動、外邊距操縱。

只需要設(shè)置希望定位的元素的寬度，然后將它們向左或向右浮動。因為浮動的元素不再占據(jù)文檔流中的任何空間，它們就不再對包圍他們的塊框產(chǎn)生任何影響，為解決這個問題，1.需要對布局中各個點上的浮動元素進(jìn)行清理，常見的做法不是連續(xù)的浮動和清理元素，而是浮動幾乎所有東西，然后在整個文檔的“戰(zhàn)略點”（比如頁腳）上進(jìn)行一次或者兩次清理；2.還可以使用溢出方法清理某些元素的內(nèi)容。

1.兩列的浮動布局

<div class="wrapper">
  <div class="content">
      <div class="primary">     </div>
      <div class="secondary">   </div>
  </div>
  <div class="footer"> </div>
</div>

一般來說，將兩列都向左浮動，然后使用外邊距或內(nèi)邊距在兩列之間創(chuàng)建一個隔離帶，使用這種方法，列在可用空間被包的很緊，沒有喘息的空間，若瀏覽器表現(xiàn)良好則沒有問題，但是差勁的瀏覽器會打亂緊密的布局，迫使一列退到另一列的下面，例如在IE上，IE考慮元素內(nèi)容的尺寸，而不是元素本身的尺寸，標(biāo)準(zhǔn)的瀏覽器中，如果內(nèi)容太大（可能只是把文本設(shè)置為斜體），它只會超出框之外，而IE中整個元素都會擴(kuò)展，這樣的話在緊密的布局中，沒有足夠的空間可以讓元素并排出現(xiàn)，就會有一個浮動元素退到下面去。
解決方法：不使用水平外邊距或內(nèi)邊距來建立隔離帶，而是讓一個元素向左浮動，讓另一個向右浮動，從而創(chuàng)建視覺上的隔離，如果一個元素的尺寸增加了，它不會立刻占滿水平空間并下降，而只是擴(kuò)展到視覺隔離帶中：

代碼實現(xiàn)：

.wrapper{
    width:920px;
}
.content .primary{
    width : 650px;
    padding-right : 20px;// 設(shè)置內(nèi)邊距，避免其包含的文本緊挨著元素的右邊緣
    float:right;
    display:inline;//用來防止IE中雙外邊距浮動產(chǎn)生的bug
}
.content .secondary{
    width:230px;
    float:left;
    display:inline;//用來防止IE中雙外邊距浮動產(chǎn)生的bug
}
.content{
    overflow:hidden;//上述元素是浮動的，不占據(jù)文檔流的空間，造成頁腳上升，則需要對父元素content應(yīng)用溢出方法來清理浮動元素
}

總寬度是920px，代碼的結(jié)果是在浮動元素之間有20px的隔離帶，用來防止內(nèi)容擴(kuò)展導(dǎo)致浮動元素下降。

2.三列的浮動布局

<div class="content">
    <div class="primary">
        <div class="primary">     </div>
        <div class="secondary">   </div>
    </div>
    <div class="secondary"> </div>
</div>

方法：其實就是將主內(nèi)容區(qū)域分為兩列，從而形成三列的效果。將次要內(nèi)容向左浮動，主內(nèi)容區(qū)向右浮動，再在主內(nèi)容div中，將次要div向右浮動。

.content .primary{
    width : 670px;
    float:right;
    display:inline;         //用來防止IE中雙外邊距浮動產(chǎn)生的bug
}
.content .secondary{
    width:230px;
    float:left;
    display:inline;      //用來防止IE中雙外邊距浮動產(chǎn)生的bug
}
.content .primary .primary{
    width:400px;
    float:left;
    display:inline;
}
.comtent .primary .secondary{
    width:230px;
    padding-right:20px;       //設(shè)置內(nèi)邊距，避免其包含的文本緊挨著元素的右邊緣
    float:right;
    display:inline;
}