CSS布局技術(shù)的根本是3個基本概念：定位蒿柳、浮動、外邊距操縱漩蟆。
只需要設(shè)置希望定位的元素的寬度垒探，然后將它們向左或向右浮動。因為浮動的元素不再占據(jù)文檔流中的任何空間怠李，它們就不再對包圍他們的塊框產(chǎn)生任何影響圾叼，為解決這個問題，1.需要對布局中各個點上的浮動元素進行清理捺癞，常見的做法不是連續(xù)的浮動和清理元素褐奥，而是浮動幾乎所有東西，然后在整個文檔的“戰(zhà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)容的尺寸，而不是元素本身的尺寸输钩，標準的瀏覽器中豺型，如果內(nèi)容太大（可能只是把文本設(shè)置為斜體），它只會超出框之外买乃，而IE中整個元素都會擴展姻氨，這樣的話在緊密的布局中，沒有足夠的空間可以讓元素并排出現(xiàn)剪验，就會有一個浮動元素退到下面去肴焊。
解決方法：不使用水平外邊距或內(nèi)邊距來建立隔離帶，而是讓一個元素向左浮動功戚，讓另一個向右浮動娶眷，從而創(chuàng)建視覺上的隔離，如果一個元素的尺寸增加了啸臀，它不會立刻占滿水平空間并下降届宠，而只是擴展到視覺隔離帶中：
代碼實現(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)容擴展導(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;
}
