CSS浮動、定位、父容器塌陷問題

　　首先，浮動和定位是CSS中布局的基礎，通過浮動和定位，可以實現(xiàn)對每一個盒模型精確到像素級別的控制，可見其重要性。

　　先談談浮動：

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

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

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

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

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

　　fixed定位：fixed定位同樣是脫離了標準文檔流，不過他是相對于瀏覽器的窗口而言的，不會隨著滾動條或者是界面的移動而改變，同樣可以設定top、left、right、bottom值。

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

　　1、如果是分兩列布局，可以同時對兩個盒子應用浮動來進行布局，可以設定左右兩個盒子自己的寬度或者是寬度百分比。

　　2、同樣是分兩列布局，也可以對左邊的盒子應用左浮動布局，對右邊的盒子應用定位或者設置它的margin值來定位。

　　3、對于三列布局，最好采用浮動加定位的方法，對于左右兩側的盒子進行浮動處理，對于中間元素（盒子）進行設置其左右margin來實現(xiàn)定位。

　　必須明白的是，浮動這一偉大的創(chuàng)舉，可能會導致父容器塌陷，也就是說，當容器內(nèi)的全部元素浮動（會導致父容器高度為零）或者內(nèi)部不浮動的元素不足以撐起父容器時，父容器高度會為0或者不足以滿足我們對頁面布局的要求，那么，我們必須想一些辦法來解決這兒問題，我這有幾個辦法：

　　1、給父容器設置一個高度

　　2、設置父容器overflow：hidden或者overflow：auto；

overflow:hidden;
overflow:auto;

　　3、設置父元素浮動（不推薦）

　　4、設置空元素對其（clearfix：both）

　　5、給父元素應用以下樣式:

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

　　總結來說，對于給網(wǎng)頁中元素的布局，經(jīng)常需要浮動和定位一起來用，綜合起來，方能達到我們需要的效果。

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