1,高度塌陷

在文檔流中，父元素的高度默認是被子元素撐開的，也就是子元素多高，父元素就多高

但是當為子元素設置浮動以后，子元素會完全脫離文檔流，此時將會導致子元素無法撐起父元素的高度，導致父元素的高度塌陷

由于父元素的高度塌陷了，則父元素下的所有元素都會向上移動，這樣將會導致頁面布局混亂

所以在開發中一定要避免出現高度塌陷的問題,

我們可以將父元素的高度寫死，以避免塌陷的問題出現，

但是一旦高度寫死，父元素的高度將不能自動適應子元素的高度，所以這種方案是不推薦使用的

2,解決高度坍塌

根據W3C的標準，在頁面中元素都一個隱含的屬性叫做Block Formatting Context（塊的格式化環境）簡稱BFC，該屬性可以設置打開或者關閉，默認是關閉的

當開啟元素的BFC以后，元素將會具有如下的特性：

a.父元素的垂直外邊距不會和子元素重疊

b.開啟BFC的元素不會被浮動元素所覆蓋

c.開啟BFC的元素可以包含浮動的子元素

如何開啟元素的BFC

aa.設置元素浮動

- 使用這種方式開啟，雖然可以撐開父元素，但是會導致父元素的寬度丟失，而且使用這種方式也會導致下邊的元素上移，不能解決問題

bb.設置元素絕對定位

cc.設置元素為inline-block

- 可以解決問題，但是會導致寬度丟失，不推薦使用這種方式

dd.將元素的overflow設置為一個非visible的值

zoom表示放大的意思，后邊跟著一個數值，寫幾就將元素放大幾倍

zoom:1表示不放大元素，但是通過該樣式可以開啟hasLayout

zoom這個樣式，只在IE中支持，其他瀏覽器都不支持

3,清除浮動

none，默認值，不清除浮動

left，清除左側浮動元素對當前元素的影響

right，清除右側浮動元素對當前元素的影響

both，清除兩側浮動元素對當前元素的影響

清除對他影響最大的那個元素的浮動

4,定位

(1)定位：

- 定位指的就是將指定的元素擺放到頁面的任意位置

通過定位可以任意的擺放元素

- 通過position屬性來設置元素的定位

-可選值：

static：默認值，元素沒有開啟定位

relative：開啟元素的相對定位

absolute：開啟元素的絕對定位

fixed：開啟元素的固定定位（也是絕對定位的一種）

(2)position: relative

當元素的position屬性設置為relative時，則開啟了元素的相對定位

當開啟了元素的相對定位以后，而不設置偏移量時，元素不會發生任何變化

相對定位是相對于元素在文檔流中原來的位置進行定位

相對定位的元素不會脫離文檔流

相對定位會使元素提升一個層級

相對定位不會改變元素的性質，塊還是塊，內聯還是內聯

(3)left:xxx px;

right:xxx px;

當開啟了元素的定位（position屬性值是一個非static的值）時，可以通過left right top bottom四個屬性來設置元素的偏移量

left：元素相對于其定位位置的左側偏移量

right：元素相對于其定位位置的右側偏移量

top：元素相對于其定位位置的上邊的偏移量

bottom：元素相對于其定位位置下邊的偏移量

通常偏移量只需要使用兩個就可以對一個元素進行定位，

一般選擇水平方向的一個偏移量和垂直方向的偏移量來為一個元素進行定位