怎麼說呢，從接觸前端起，到現在已經有三個月了，這麼長時間的學習呢，我的水平依然一般，前幾天參加了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;
}