首先，浮動(dòng)和定位是CSS中布局的基礎(chǔ)，通過(guò)浮動(dòng)和定位，可以實(shí)現(xiàn)對(duì)每一個(gè)盒模型精確到像素級(jí)別的控制，可見(jiàn)其重要性。

　　先談?wù)劯?dòng)：

　　在HTML的文檔對(duì)象模型里，采用的是流式布局，也就是說(shuō)，塊級(jí)元素是獨(dú)占一行的，想讓塊級(jí)元素并排，主要是兩種辦法，一種是在CSS里設(shè)置塊級(jí)元素的display為inline-block。但是很多時(shí)候并不適合用這種辦法，更多時(shí)候我們會(huì)采用浮動(dòng)的辦法。

　　浮動(dòng)，主要有兩種float：left；和float：right；浮動(dòng)可以讓塊級(jí)元素脫離標(biāo)準(zhǔn)文檔流，可以理解成為定義了浮動(dòng)的元素，就要向所定義方向去移動(dòng)，直到被阻擋住或者碰到了父容器邊界。如果當(dāng)行剩寬度不足，那么所浮動(dòng)的盒子，就會(huì)浮動(dòng)到下一行。浮動(dòng)為實(shí)現(xiàn)頁(yè)面布局提供了一種解決方案。

　　但是，不能忽略的是，有時(shí)候通過(guò)簡(jiǎn)簡(jiǎn)單單的浮動(dòng)不能達(dá)到我們對(duì)界面布局的需求。這時(shí)候定位的重要性就體現(xiàn)了出來(lái)，定位可以分為四種：relative（相對(duì)定位）、absolute（絕對(duì)定位）、fixed（固定定位）、static。當(dāng)我們不對(duì)元素應(yīng)用定位屬性時(shí)，就相當(dāng)于static。

　　那么，如何理解relative定位呢？應(yīng)用了relative定位的元素（盒子模型）不脫離標(biāo)準(zhǔn)文檔流，可以對(duì)它設(shè)定top、left、right、bottom值，實(shí)現(xiàn)對(duì)元素（盒子模型）相對(duì)于原來(lái)位置的微調(diào)，top即元素相對(duì)于原來(lái)的位置下移（可以設(shè)定負(fù)值，作用相當(dāng)于設(shè)置正值bottom），left是元素相對(duì)于原來(lái)的位置右移。相同的，right為左移，bottom是上移。

　　absolute定位：應(yīng)用了absolute定位的元素會(huì)脫離文檔流，好像它從來(lái)沒(méi)有存在過(guò)，這時(shí)它的定位是相對(duì)于他的應(yīng)用了relative定位的祖先元素而言的。而且它還有一個(gè)很重要的特性：就是會(huì)根據(jù)設(shè)定的位移值實(shí)現(xiàn)“跨越”，什么意思呢？就是說(shuō)，對(duì)其設(shè)定top、left、right、bottom是相對(duì)于他的祖先元素（盒子）的邊界而言的。如果對(duì)其設(shè)定哪個(gè)位移方向，此元素（盒子）會(huì)先移動(dòng)到那個(gè)方向的邊界，然后相對(duì)于邊界去移動(dòng)。

　　fixed定位：fixed定位同樣是脫離了標(biāo)準(zhǔn)文檔流，不過(guò)他是相對(duì)于瀏覽器的窗口而言的，不會(huì)隨著滾動(dòng)條或者是界面的移動(dòng)而改變，同樣可以設(shè)定top、left、right、bottom值。

　　至于分列布局，我個(gè)人常用的方法有以下幾種：

　　1、如果是分兩列布局，可以同時(shí)對(duì)兩個(gè)盒子應(yīng)用浮動(dòng)來(lái)進(jìn)行布局，可以設(shè)定左右兩個(gè)盒子自己的寬度或者是寬度百分比。

　　2、同樣是分兩列布局，也可以對(duì)左邊的盒子應(yīng)用左浮動(dòng)布局，對(duì)右邊的盒子應(yīng)用定位或者設(shè)置它的margin值來(lái)定位。

　　3、對(duì)于三列布局，最好采用浮動(dòng)加定位的方法，對(duì)于左右兩側(cè)的盒子進(jìn)行浮動(dòng)處理，對(duì)于中間元素（盒子）進(jìn)行設(shè)置其左右margin來(lái)實(shí)現(xiàn)定位。

　　必須明白的是，浮動(dòng)這一偉大的創(chuàng)舉，可能會(huì)導(dǎo)致父容器塌陷，也就是說(shuō)，當(dāng)容器內(nèi)的全部元素浮動(dòng)（會(huì)導(dǎo)致父容器高度為零）或者內(nèi)部不浮動(dòng)的元素不足以撐起父容器時(shí)，父容器高度會(huì)為0或者不足以滿(mǎn)足我們對(duì)頁(yè)面布局的要求，那么，我們必須想一些辦法來(lái)解決這兒?jiǎn)栴}，我這有幾個(gè)辦法：

　　1、給父容器設(shè)置一個(gè)高度

　　2、設(shè)置父容器overflow：hidden或者overflow：auto；

overflow:hidden;
overflow:auto;

　　3、設(shè)置父元素浮動(dòng)（不推薦）

　　4、設(shè)置空元素對(duì)其（clearfix：both）

　　5、給父元素應(yīng)用以下樣式:

.clearfix:before,
.clearfix:after
{
 content:"";
 display:table;
}
.clearfix:after
{
 clear:both;
}

　　總結(jié)來(lái)說(shuō)，對(duì)于給網(wǎng)頁(yè)中元素的布局，經(jīng)常需要浮動(dòng)和定位一起來(lái)用，綜合起來(lái)，方能達(dá)到我們需要的效果。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com