本文檔回顧了在工作中常會用到的html／css的布局基礎，由于很多坑只有在實際中踩到才會去總結，因此，本文也會不定期更新。ok，let's start！

盒子模型詳解圖

position 屬性詳解

工作里面，常常會用到position的四個屬性：static／relative／absolute／float，配合相應的屬性，也就可以實現相應的頁面布局。

接下來，就具體分析一下各個position屬性：

1. position: static

在 css 所有元素的position屬性的默認值都是static，因此在絕大多數情況下，我們都不需要顯式地設置position: static，那么這個屬性值有什么意義呢？

我覺得它主要的作用就是取消前一個設置過的position屬性，例如：在你的兩個頁面里，同時存在div#div-1，現在第一個頁面需要設置為position: absolute，而第二個則不需要設置絕對定位，就需要在第二個頁面設置position: static。

2. 相對定位 position: relative

relative是相對定位，在給元素設置了position: relative之后，就可以通過設置元素的top／bottom／left／right來調整元素的位置。不過，使用position: relative的時候也要注意：

• 元素設置了relative的時候，是相對于元素本身位置進行定位；
• 元素設置了relative以后，可以通過設置top／bottom／left／right改變元素當前的所在位置，但是，在元素位移以后，元素本身的位置變化了，而元素最初所占的物理空間依舊存在，也就是說，元素相對定位以后，并沒有影響其它相鄰的元素；
• 元素設置了relative以后，如果沒有設置top／bottom／left／right，元素位置不會發生任何改變。

3. 絕對定位 position: absolute

絕對定位absolute是position的第三個屬性值，元素設置了position: absolute之后，整個元素就會漂出文檔流，元素自身的物理空間也就隨之消失了。這也就是與relative的不同，它不會具有之前的物理空間。如果絕對定位元素的祖先沒有設置過任何的relative／absolute設置，那么它的定位是相對于html。

4. relative 和 absolute 的混合使用

基于第3點所描述的absolute定位的原理，我們就可以在實際布局中將relative和absolute結合起來用。原理差不多就是：

• 如果一個元素absolute以后，它的參照是離自身最近的元素是否設置了relative，如果有，就會以離自己最近的元素定位；如果沒有，那就會向祖先元素尋找relative，一直尋找到html為止。

由此，我們就通過將父級元素設置為position: relative，然后將子元素設置為position: absolute，最后通過對子元素top／bottom／left／right屬性的設置，在父級元素里完成布局，如兩列、三列布局。

5. float

我們可以在一個元素上使用float: left和float: right讓元素向左或者向右，而且還可以使用文本圍繞在這個元素的周邊（這個作用在文本圍繞圖片特別有用，即設置圖片浮動）。不過需要注意的是：

• 浮動和絕對定位相比，解決了高度自適應的問題，但是，浮動會破壞當初的文檔流，使其父元素坍塌，無法撐開原來的高度，所以還需要清除浮動。

關于清除浮動，差不多有三種方法：

• 最古老的方法clear: both：需要添加一個額外的元素，比如在浮動元素下面加一個<div>，然后定義它的樣式為clear: both；
• 最簡單的方法overflow：只需要在父元素里添加overflow: auto; zoom: 1就行了，不過IE6以下不支持。
• 利用偽元素：利用:after和:before來在元素內部插入兩個元素塊，從面達到清除浮動的效果。其實現原理類似于clear: both方法，只是區別在于:clear在html插入一個div.clear標簽，而這種方法則是利用其偽類在元素內部增加一個類似于div.clear的效果。（其實:after就可以清除浮動，不過在瀏覽器兼容的時候會出現一個垂直邊距疊加的bug，所以需要加上:before來完成兼容）。

6. position: fixed

position: fixed也是設置絕對定位的方法，與position: absolute不同的是，它是相對于瀏覽器窗口進行定位，可以通過top／bottom／left／right對為止進行調整。

如果看了之后還是不太明白，之后可能會寫具體的代碼來說明，先點個喜歡和關注再說唄！