清除浮動

清除浮動的本質

• 在標準流的布局中，很多時候父元素是不會設置高度的，直接由子元素來撐開高度。但是當你設置浮動后，因為子元素脫標了，所以不會再撐開父元素的高度，這樣下面的標準流就頂上來影響布局。
• 在之前學習的布局中我們的做法是直接給父元素寫死高度，讓它有一個占位，但是實際工作中有些地方是不能設置高度的，那怎么解決浮動不占位的問題呢？答案就是清除浮動。

清除浮動方法

• 清除浮動其實也可以叫做閉合浮動，它的核心原理就是，在父元素最后插入一個小盒子，在父元素里把浮動的元素閉合起來，并告訴父盒子清除浮動。這樣設置了清除浮動后，父元素就會自動檢測浮動子元素的高度，不用專門給父元素設置高度了。格式如下：
  選擇器：{clear:left|right|both}
• 對應的就是左邊，右邊，兩邊清除浮動，其中最常用的是both

額外標簽法

• 就是在盒子的最后加一個空標簽（div，br，p等等），并給該標簽設置清除浮動。但是這種方法很早的時候會用，現在用得很少了，也不推薦使用。

overflow清除浮動

• 語法： overflow:hidden|auto|scroll
• 給父元素設置。使用overflow會觸發BFC方式（后面會講），從而達到清除浮動的效果，三個屬性值隨意寫一個都能達到效果。這個方法有一定的弊端，建議謹慎使用。

after偽元素清除浮動

• 語法：
  .clearfix:after {
content:'.';
display:block;
clear:both;
height:0;
visibility:hidden;
}
.clearfix {
*zoom:1;
}
• 解釋：clearfix是一個通用的清除浮動類名，寫好之后只需要調用這個類名到標簽中即可。大概原理就是：在元素內的最后插入一個元素（不用再html結構中寫），放入一個最簡單的內容（空也是可以的），轉換為塊級元素，清除浮動，高度設為0，并隱藏這個塊級元素的內容。
• 下面的一個是專門給ie6和ie7用的，因為它們不認識偽元素。*是只有ie6和ie7識別。
• 這個方法是現在應用得比較多的一種方法。

after偽元素空余字符法

• 語法：
  .clearfix:after {
content:'\200B|\0200';
display:block;
clear:both;
height:0;
}
.clearfix {
*zoom:1;
}
• 原理和上一個是一樣的，只是寫法做了一些優化。在插入元素后，不給它設置值而是放入\200B或者\0200（零寬度空格）。因為是空的內容所以就不用在設置visibility:hidden來隱藏內容了，節省了一點代碼量。

雙偽元素清除法

• 語法：
  clearfix:before, clearfix:after {
content:"";
display:table;
}
clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
• 這個方法的意思，給父元素一前一后插入一個元素，完全把里面浮動的盒子閉合起來，并在設置清除浮動。至于為什么要轉換為table元素，現在還不能理解。強烈推薦使用這種方法來清除浮動。

定位

什么是定位

• 定位在頁面布局中常用于盒子與盒子之間的層疊關系。比如，你想一個盒子壓在另一個盒子上面來做一個立體效果的展示，這種效果使用標準流和浮動幾乎是不可能實現的，只有定位才能勝任，并且js也和定位配合的最多。

定位的組成

• 定位是由邊偏移和定位屬性來配合使用的。并且邊偏移只能應用在定位中。

邊偏移

• 格式：top|bottom|left|right
• 看名字就能理解，邊偏移就是與上下左右四條邊的距離，可以設置數值，也可以設置百分比。

靜態定位

• 格式：position:static
• 其實靜態定位就是標準流的特性，讓每個元素都按照順序從上至下從左到右依次來顯示。設置了靜態定位后，邊偏移就沒有效果了。所以一般靜態定位使用取消的定位的。

相對定位

• 格式：postition:relative
• 相對定位的兩個重要特性：
  • 它是基于自己本身的位置來做移動的
  • 他依然屬于標準流，雖然移動了位置，但是原來的占位還是會保留
• 所以，它后面的盒子不會受到影響。

絕對定位

• 格式：position:absolute;
• 絕對定位的四個重要特性：
  • 它是基于父元素的位置來進行移動的，如果父元素沒有設置定位，那么會基于瀏覽器的可視區來移動
  • 它是完全脫標的，當移動后原來的位置就不再占位了
  • 它移動完畢后，會固定位置，隨著頁面的滾動而滾動。
  • 如果設置了絕對定位卻不是邊偏移，那么它首先會脫標，然后以標準流的顯示方式，與上一個盒子的底邊線對齊。
  • 一般來說想要實現一個盒子在另一個盒子上，都是用絕對定位，因為它不占位置。

子絕父相的原理

• 子絕父相是在網頁布局經常用到的一種方法，就是子元素使用絕對定位，父元素使用相對定位。為什么要這么做呢？
  • 首先要確定一點，如果子元素要使用絕對定位，那么父元素也是必須要使用定位的，不然子元素就會以瀏覽器來移動了。
    然后父親定位的方式，首先排除靜態定位，因為靜態定位就是不定位，根本不考慮。
    其次固定定位，因為固定定位不會隨著頁面滾動而滾動，這不符合正常布局理念，所以也排除。
    最后就剩絕對定位和相對定位了，正常情況下網頁都是以標準流的方式來顯示的，所以一個盒子它上下都會有盒子。當父元素也是用絕對定位，那么它也不占位置了，就會影響下面的盒子，這也是不符合要求的。
    相對定位才能占位置，所以最后也是最佳的選擇就是父元素使用相對定位，這也就是子絕父相的由來。

讓絕對定位的盒子垂直水平居中

• 因為絕對定位的盒子是脫標的，所以不能使用margin:0 auto;來實現水平居中，更不論垂直居中了。所以要讓絕對定位的盒子垂直水平居中就要使用另一種方法：
  • 水平居中：先給盒子設置left:50%的左偏移，這樣盒子的左邊線就對齊父盒子的水平居中線，然后再讓盒子往左走自身一半的距離，就實現了水平居中。給盒子設置margin-left:自身一半的負值，就能讓盒子往左走自身的一半距離。
  • 垂直居中：同理，先給盒子設置top:50%的上偏移，讓盒子的上邊框對齊垂直居中想，然后再讓盒子往上走自身一半的距離，就實現了垂直居中。給盒子設置margin-top:自身一半的負值，就能讓盒子往上走自身的一半距離。