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

　　怎麼說呢，從接觸前端起，到現在已經有三個月了，這麼長時間的學習呢，我的水平依然一般，前幾天參加了IFE2017，下面總結一下對CSS中浮動、定位、分列佈局、父容器塌陷問題的一些心得。

　　首先，浮動和定位是CSS中佈局的基礎，透過浮動和定位，可以實現每個盒模型精確到像素層級的控制，可見其重要性。

　　先談談浮動：

　　在HTML的文檔物件模型裡，採用的是串流佈局，也就是說，區塊級元素是獨佔一行的，想讓區塊級元素並排，主要是兩種辦法，一種是在CSS裡設定區塊級元素的display為inline-block。但很多時候不適合用這種辦法，更多時候我們會採取浮動的辦法。

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

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

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

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

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

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

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

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

　　3、對於三列佈局，最好採用浮動加定位的方法，對於左右兩側的盒子進行浮動處理，對於中間元素（盒子）進行設置其左右margin來實現定位。

　　必須明白的是，浮動這一偉大的創舉，可能會導致父容器塌陷，也就是說，當容器內的全部元素浮動（會導致父容器高度為零）或者內部不浮動的當元素不足以撐起父容器時，父容器高度會為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;
}

　　總結來說，對於給網頁中元素的佈局，經常需要浮動和定位一起來用，綜合起來，方能達到我們需要的效果。

　　以上就是我這段時間來對於CSS定位、浮動的一些小小體會，可能會有錯誤在裡面，希望大家可以給我提出來，方便我們大家一同進步，總結這些東西，看了許多大佬的文檔，所以很多東西借鑒了大佬的意見，說出來自己的一些理解，同時加深自己對其間知識體悟理解。希望大家在前端之路一同努力，每天都有進步！

更多CSS浮動、定位、父容器塌陷問題 相關文章請關注PHP中文網！

###