這節介紹兩個很重要的內容：浮動和定位

  浮動的布局規則

  浮動在早期主要用于圖片，圖片時替換元素。當我們為一個非替換元素使用浮動時，最好給他定義一個width。否則浮動后元素的寬度可能會趨于0。關于浮動的另一個有意思的情況，浮動元素的外邊距和周圍元素的外邊距不會合并。此外，浮動元素會生成一個塊級框，相當于display:block。

  在深入討論浮動之前，首先要建立包含塊的概念。浮動元素的包含塊是其最近的塊級祖先元素。有一些特定規則控制著浮動元素的擺放

1.浮動元素的左右外邊界不能超過其包含塊的內邊界。一個浮動元素的頂端不能比他的父元素內頂端更高。當一個浮動元素被夾在兩個外邊距之間時，會假設它外邊有一個塊級父元素。(外邊界指元素框的邊界，包含margin，內邊界指width的邊界，不包括padding部分)

關于第一點，我們知道把元素浮動后父元素可能會塌陷，因為浮動后的元素脫離了正常文檔流，所以父元素的高度會變為沒有該子元素時的高度。

2.后面的所有規則都是為了保證浮動元素彼此之間不會覆蓋。其中一個比較有意思的，浮動元素的頂端不能超過它上一個浮動元素的頂端。

利用負外邊距可以使浮動元素的邊界超出父元素的邊界，也可以使浮動元素的內容覆蓋其他內容。當浮動元素的內容和正常流中的元素內容重疊時。行內元素會完全覆蓋浮動元素的內容(包括背景，邊框)另一方面，塊級元素只是將其內容顯示在浮動元素之上，背景和邊框都在浮動元素之下。

浮動的清除

屬性名：clear

值：left | right | both | none | inherit

應用于：塊級元素

繼承性：無

該屬性會確保元素的指定方向沒有浮動元素。

定位

定位的情況要復雜很多，先笼統地介紹一下定位的屬性和他們的值。

屬性名：position

值：static | relatice | absolute | fixed | inherit

初始值：static

應用于：所有元素

繼承性：無

對元素使用absolute定位后會生成一個塊級框，相當于display:block。fixed類似于absolute，不過他的包含塊始終為視窗本身。

包含塊的含義是定位上下文，對于relative和static定位的元素，包含塊由最近的塊級或行內塊祖先的內容邊界構成。對于absolute，包含塊是最近的position不為static的祖先元素。

偏移屬性

屬性名：top，right，bottom，left

值：長度或百分數，auto，inherit

初始值：auto

繼承性：無

百分數：相對于包含塊的高度或寬度

偏移屬性表示定位元素相對于包含塊的偏移長度。

對于absolute定位的元素，我們知道一個有用的公式后就能很好的理解它的大小和位置。(由于top，left，right，left可以為auto)。right+margin-right+border-right+padding-right+width+padding-left+border-left+margin-left+left=包含塊width。垂直方向上情況類似。

因此，對于absolute定位的元素，可以這樣讓他水平居中或垂直居中：

div{position:absolute;left:0;right:0;width:20%;height:20%;margin:0 auto;}垂直居中類似，只要把top和bottom設置后把上下外邊距設為auto即可。