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