普通流定位，又稱為文件流定位，是頁面元素的預設定位方式
頁面中的塊級元素：按照從上到下的方式逐個排列
頁面中的行內元素：按照從左到右的方式逐個排列
但是如何讓多個塊級元素在一行內顯示?
這裡就引出了浮動定位
float屬性 取值為 left/right
脫離文件流
元素會相對於它原來的位置偏移某個距離，改變元素位置後，元素原本的空間依然會被保留
語法 屬性：position
取值：relative
配合著 偏移屬性(top/right/bottom/left)實現位置的改變
如果元素被設定為絕對定位的話，將具備以下幾個特徵
1、脫離文件流-不佔據頁面空間
2、通過偏移屬性固定元素位置
3、相對於 最近的已定位的祖先元素實現位置固定
4、如果沒有已定位祖先元素，那麼就相對於最初的包含塊(body,html)去實現位置的固定
語法 屬性：position
取值：absolute
配合著 偏移屬性(top/right/bottom/left)實現位置的固定
將元素固定在頁面的某個位置處，不會隨著滾動條而發生位置移動
語法 屬性：position
取值：fixed
配合著 偏移屬性(top/right/bottom/left)實現位置的固定
直接設定父元素的高度
優勢：極其簡單
弊端：必須要知道父元素高度是多少
在父元素中，追加空子元素，並設定其clear屬性為both
clear是css中專用於清除浮動的屬性
作用：清除當前元素前面的元素浮動所帶來的影響
取值：
1、none
預設值，不做任何清除浮動的操作
2、left
清除前面元素左浮動帶來的影響
3、right
清除前面元素右浮動帶來的影響
4、both
清除前面元素所有浮動帶來的影響
優勢：**量少 容易掌握 簡單易懂
弊端：會新增許多無意義的空標籤，有違結構與表現的分離，不便於後期的維護
設定父元素浮動
優勢：簡單，**量少，沒有結構和語義化問題
弊端：對後續元素會有影響
為父元素設定overflow屬性
取值：hidden 或 auto
優勢：簡單，**量少
弊端：如果有內容要溢位顯示(彈出選單)，也會被一同隱藏
父元素設定display:table
優勢：不影響結構與表現的分離，語義化正確，**量少
弊端：盒模型屬性已經改變，會造成其他問題
使用內容生成的方式清除浮動
1:after 選擇器向選定的元素之後插入內容.clearfix:after
content:"";生成內容為空
display: block;生成的元素以塊級元素顯示,
clear:both;清除前面元素浮動帶來的影響
相對於空標籤閉合浮動的方法
優勢：不破壞文件結構，沒有***
弊端：**量多
1優勢：不破壞文件結構，沒有***.cf:before,.cf:after
5 .cf:after
弊端： **量多
注意：display:table本身無法觸發bfc，但是它會產生匿名框(anonymous boxes)，而匿名框中的display:table-cell可以觸發bfc，簡單說就是，觸發塊級格式化上下文的是匿名框，而不是display:table。所以通過display:table和display:table-cell建立的bfc效果是不一樣的（後面會說到bfc）。
css2.1 **模型中的元素，可能不會全部包含在除html之外的文件語言中。這時，那些「丟失」的元素會被模擬出來，從而使得**模型能夠正常工作。為什麼會margin邊距重疊？所有的**元素將會自動在自身周圍生成所需的匿名table物件，使其符合table/inline-table、table-row、table- cell的三層巢狀關係。
overflow:hidden, 語義應該是溢位:隱藏，按道理說，子元素浮動了，但依然是在父元素裡的，而父元素高度塌陷，高度為0了，子元素應該算是溢位了，為什麼沒有隱藏，反而撐開了父元素的高度？
為什麼display:table也能清除浮動，原理是什麼？
要解釋這些疑問，我們就要提到formatting context
formatting context是w3c css2.1規範中的乙個概念。它是頁面中的一塊渲染區域，並且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關係和相互作用。
最常見的formatting context有block fomatting context(簡稱bfc)和inline formatting context(簡稱ifc)。
css2.1 中只有bfc和ifc, css3中還增加了gfc和ffc
bfc(block formatting context)直譯為」塊級格式化上下文」。它是乙個獨立的渲染區域，只有block-level box參與， 它規定了內部的block-level box如何布局，並且與這個區域外部毫不相干。 block-level box，display屬性為block, list-item, table的元素，會生成block-level box。並且參與block fomatting context。
inline-level box， display屬性為inline, inline-block, inline-table的元素，會生成inline-level box。並且參與inline formatting context。
bfc布局規則：
1、內部的box會在垂直方向，按照從上到下的方式逐個排列。
2、box垂直方向的距離由margin決定。屬於同乙個bfc的兩個相鄰box的margin會發生重疊
3、每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。
4、bfc的區域不會與float box重疊。
5、bfc就是頁面上的乙個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。
6、計算bfc的高度時，浮動元素的高度也參與計算
1、根元素
2、float （left，right）
3、overflow 除了visible 以外的值（hidden，auto，scroll ）
4、display (table-cell，table-caption，inline-block)
5、position（absolute，fixed）
11516class="
top">上
17class="
bottom
">下
依據bfc布局規則第二條：
box垂直方向的距離由margin決定。屬於同乙個bfc的兩個相鄰box的margin會發生重疊注意：發生重疊後，外邊距的高度等於兩個發生重疊的外邊距的高度中的較大者
依據bfc布局規則第三條：
每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。我們可以看到，雖然有浮動的元素top，但是bottom的左邊依然與包含塊的左邊相接觸
依據bfc布局規則第四條：
bfc的區域不會與float box重疊。看**和效果圖，可以看出，這次的**比上面的**多了一行overflow:hidden;用這行**觸發新的bfc後，
由於這個新的bfc不會與浮動的top重疊，所以bottom的位置改變了
當div增加 overflow:hidden; 時 效果如下
依據bfc布局規則第六條：
計算bfc的高度時，浮動元素的高度也參與計算。到此我們應該是解決了上面的所有疑問了。
高度塌陷解決方法
如果父元素只包含浮動元素，且父元素未設定高度和寬度，那麼它的高度就會塌縮為零，也就是所謂的 高度塌陷 如果父級元素包含背景或者邊框，那麼溢位的元素就不像父級元素的一部分了。解決 高度塌陷 問題的方法 1.浮動父級元素，父級元素的高度就會擴大，直到完全包含它裡面的浮動元素。如果使用這種方法，一定要在該...
高度塌陷及解決方法
一 什麼是高度塌陷 在文件流中，當父元素沒有設定高度的時候，父元素的高度就取決於子元素的高度，也就是常常說的 由子元素撐開 當子元素設定為浮動，脫離了文件流，這時候就會造成父元素的高度塌陷，因為沒有子元素 撐著它的高度 這樣會導致父元素後面的元素往上移，造成布局混亂。二 解決此問題的方法 1.在後面...
css解決高度塌陷的方法
2 overflow hidden 解決高度塌陷並能實現高度自適應的方法 遵循bfc的顯示原則 3 在浮動元素的下方新增乙個空元素，並且給他設定一下屬性 clear both height 0 overflow hidden 4 display table 給父元素新增display table 讓...