在css知識體系中，除了css選擇器，樣式屬性等基礎知識外，css布局相關的知識才是css比較核心和重要的點。今天我們來深入學習一下css布局相關的知識。
上篇文章我們講完了css布局中盒模型和元素分類的相關知識，同時介紹了box-sizing和行框。這篇我們繼續...
上篇我們講解了不同型別元素的特點，我們可以隨意的排列組合他們來達到我們想要的效果。但是他們都是基於乙個二維平面的，如果我們想在布局中有遮擋，重疊之類的更豐富效果，我們就需要使用到定位和浮動的相關知識。
1.1 文件流
文件流就是按照頁面元素書寫的順序，將頁面元素按從左到右，從上至下的一般順序進行排列。那麼也就可以理解成我們剛才所說的乙個二維平面的概念。
那麼如果我想要實現更豐富的效果，就需要脫離文件流，在乙個新的平面上去顯示，這樣我們就可以在螢幕上有多個平面疊加顯示的效果了，那麼這就是浮動和定位的工作了。
1.2 定位
定位允許你使用position屬性，將乙個元素相對於他自己或者他的祖先元素甚至是瀏覽器視窗通過top,left,right,bottom屬性進行偏移。
根據position屬性的取值，元素可以分為靜態定位元素static（預設值）、相對定位元素relative、絕對定位元素absoute和固定定位元素fixed。
首先我們拋開static這個預設值，因為他基本不屬於定位的範疇，因為元素預設就是static，他就相當於是依據文件流顯示。
當我們使用定位時，需要position屬性和top,left,right,bottom這兩類屬性共同參與來決定乙個元素的定位型別和偏移量。
使用方法很簡單，這裡說下他們之間的區別:
1.3 包含塊包含塊就是個專有名詞，其實概念很簡單，這裡了解一下就好。
包含塊是乙個矩形區域，當元素設定屬性的百分比的時候，比如width：50%或者top: 10%，其參考係就是他的包含塊。
1.4 浮動
浮動允許你將元素浮動起來，脫離文件流向左或者向右移動。直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。雖然浮動也脫離文件流顯示，但是與定位不同的是inline和inline-block的元素可以識別這種因浮動而脫離的文件流，從而不發生重疊。
我們會發現p元素並沒有佔據掉浮動元素的位置，然後我們將上面的**稍作修改，將p元素的display改為block我們就會發現
雖然這樣p標籤佔據了float元素的位置，但是標籤裡面的文字則不會去佔據float元素的位置。
這個設定其實是有些詭異的。另外說一句，在css歷史上浮動這個東西一開始被造出來是為了實現文字圍繞這種效果的而不是用來做布局的，當時只有可以設定浮動效果，但是後來慢慢所有元素都可以浮動並且基於浮動有了自己的布局體系，所有由於歷史原因相對來說浮動的規則是比較亂的小部分還有些詭異的。有些地方我們記住就好。
我們來具體看下浮動的規則：浮動元素會從最後一行最左側的空白位置開始浮動，如當前行無法容納下自己寬度，則垂直下沉到下一行，向左或者向右碰到包含框或另乙個浮動框的邊框為止。我們這裡舉兩個例子：
lang="en">
charset="utf-8">
documenttitle>
.float
style>
head>
class="float">flaot1div>
class="float"
style="height: 60px;">flaot2div>
class="float">flaot3div>
class="float">flaot4div>
body>
html>這裡float4在float3右側空白位置起始，發現當前行無法容納下自己則垂直向下到下一行，向左移動，在碰到包含塊之前，碰到了float2的邊框，於是就會在float2的右邊框處停止浮動。
之後我們將**稍作修改，把float5這行注釋刪掉，我們會發現，一開始float5的起始位置就是在float4這行的右側空白區域，當前行可容納下自己，於是就停在了float4的右側。雖然第一行也就是float3這行右側空白區域也空著，可以放得下float5，但是float5的起始位置並不會在第一行，所以最終即使第一行有位置可以顯示下float5，它也不會在那裡顯示。
1.4 清除浮動首先為啥要清除浮動？由於浮動元素會脫離文件流顯示，所以在浮動元素後面的塊級元素會預設佔據這些元素的位置，就會造成這些塊級元素會在浮動元素的下層顯示，出現浮動元素蓋住後面正常文件流元素的效果，但這往往不是我們想要的結果。
其作用是改變使用清除浮動的這個元素與前乙個宣告的浮動元素之間的預設布局規則，讓使用清除浮動的這個元素在新的一行中顯示。
如何清除浮動
clear屬性，其值為left|right|both。
浮動元素或者非浮動元素的塊級元素都可以使用這個屬性來清除浮動（我們之前說inline和inline-block元素可以自動識別浮動，所以他們不需要清除浮動）， 他們的作用物件是前乙個宣告的浮動元素。如果使用clear:left | right則是清除前乙個float為left或者right的元素的浮動，clear：both則是清除前乙個浮動元素，無論它是向哪邊移動。那麼使用clear屬性的元素會在浮動元素的下方新開一行顯示。
清除浮動的特殊應用
清除浮動可以解決父元素高度塌陷問題。當乙個元素包裹了一些float元素的時候，由於float元素脫離文件流顯示，所以父元素無法被這些元素撐開高度，導致父元素高度為0。
那麼最常用的一種解決方案是：設定父元素的after偽元素的clear屬性來讓其撐開父元素的高度。
float
merge的一些問題和格式化上下文(formatting context)， 繼續把css布局篇完成。 CSS 浮動布局與定位布局
布局常用的方法 用float設計浮動布局 float預設值為none,可根據頁面需要設定為左浮動left，或右浮動right 瀏覽器中效果 因為 div 是區塊元素，每個 div 獨佔一行，要想讓三個 div 在同一行裡顯示，就需要給三個子元素設定浮動，但浮動會使元素脫離文件流，父元素高度崩塌，所以...
CSS布局與定位（2）
left right父級元素新增clearfix content left middle right塊級元素，設定固定寬度，左右margin等於auto box對塊級的父級使用，能讓內部的匿名行盒 文字 行內元素 span inline block元素在父親裡水平居中 container1 flex...
CSS浮動與定位
浮動 如果希望塊元素在頁面中水平排列，使用float浮動元素，脫離文件流 可選值 none 預設，元素在文件流中排列 left 元素脫離文件流，向頁面左側浮動 right 元素脫離文件流，向頁面右側浮動 元素浮動後，下邊的元素會立即向上移動 a浮動後，b會直接頂到上面 元素浮動後不會超出父元素邊框和...