怎麼說呢，從接觸前端起，到現在已經有三個月了，這麼長時間的學習呢，我的水平依然一般，前幾天參加了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、給父元素應用以下樣式:
1
.clearfix:before,
2.clearfix:after3 7
.clearfix:after
8
總結來說，對於給網頁中元素的布局，經常需要浮動和定位一起來用，綜合起來，方能達到我們需要的效果。
以上就是我這段時間來對於css定位、浮動的一些小小體會，可能會有錯誤在裡面，希望大家可以給我提出來，方便我們大家一同進步，總結這些東西，看了許多大佬的文件，所以很多東西借鑑了大佬的意見，說出來自己的一些理解，同時加深自己對其間知識體悟理解。希望大家在前端之路上一同努力，每天都有進步！
--小金魚
2017.2.26
CSS學習總結 浮動 定位 父容器塌陷問題
怎麼說呢，從接觸前端起，到現在已經有三個月了，這麼長時間的學習呢，我的水平依然一般，前幾天參加了ife2017，下面總結一下對css中浮動 定位 分列布局 父容器塌陷問題的一些心得。首先，浮動和定位是css中布局的基礎，通過浮動和定位，可以實現對每乙個盒模型精確到畫素級別的控制，可見其重要性。先談談...
CSS 浮動 定位 學習
回顧理解塊級元素 address 位址 blockquote 塊引用 center 居中對齊塊 dir 目錄列表 div 常用塊級容器，也是css layout的主要標籤 dl 定義列表 fieldset form控制組 form 互動表單 h1 大標題 h2 副標題 h3 3級標題 h4 4級標題...
CSS總結7（浮動與定位）
傳統網頁布局三種方式 浮動 浮動布局注意 父元素排列上下，內部子元素採取浮動排列左右 浮動的盒子只會影響浮動盒子後面的標準流。由於父盒子很多情況下不方便給高度，但是子盒子浮動又不占有位置，最後父盒子高度為0，就會影響下面的標準流盒子。清除浮動的本質就是清除浮動元素造成的影響，清除之後，父盒子會根據子...