清除浮動

清除浮動的本質(zhì)

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

清除浮動方法

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

額外標簽法

• 就是在盒子的最后加一個空標簽（div幻林，br，p等等）音念，并給該標簽設(shè)置清除浮動沪饺。但是這種方法很早的時候會用，現(xiàn)在用得很少了闷愤，也不推薦使用整葡。

overflow清除浮動

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

after偽元素清除浮動

• 語法：
  .clearfix:after {
content:'.';
display:block;
clear:both;
height:0;
visibility:hidden;
}
.clearfix {
*zoom:1;
}
• 解釋：clearfix是一個通用的清除浮動類名端壳，寫好之后只需要調(diào)用這個類名到標簽中即可。大概原理就是：在元素內(nèi)的最后插入一個元素（不用再html結(jié)構(gòu)中寫）枪蘑，放入一個最簡單的內(nèi)容（空也是可以的）损谦，轉(zhuǎn)換為塊級元素，清除浮動岳颇，高度設(shè)為0照捡，并隱藏這個塊級元素的內(nèi)容。
• 下面的一個是專門給ie6和ie7用的话侧，因為它們不認識偽元素麻敌。*是只有ie6和ie7識別。
• 這個方法是現(xiàn)在應(yīng)用得比較多的一種方法掂摔。

after偽元素空余字符法

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

雙偽元素清除法

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

定位

什么是定位

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

定位的組成

• 定位是由邊偏移和定位屬性來配合使用的毒费。并且邊偏移只能應(yīng)用在定位中丙唧。

邊偏移

• 格式：top|bottom|left|right
• 看名字就能理解，邊偏移就是與上下左右四條邊的距離觅玻，可以設(shè)置數(shù)值想际，也可以設(shè)置百分比培漏。

靜態(tài)定位

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

相對定位

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

絕對定位

• 格式：position:absolute;
• 絕對定位的四個重要特性：
  • 它是基于父元素的位置來進行移動的，如果父元素沒有設(shè)置定位僻爽，那么會基于瀏覽器的可視區(qū)來移動
  • 它是完全脫標的虫碉，當移動后原來的位置就不再占位了
  • 它移動完畢后，會固定位置胸梆，隨著頁面的滾動而滾動敦捧。
  • 如果設(shè)置了絕對定位卻不是邊偏移，那么它首先會脫標碰镜，然后以標準流的顯示方式兢卵，與上一個盒子的底邊線對齊。
  • 一般來說想要實現(xiàn)一個盒子在另一個盒子上绪颖，都是用絕對定位秽荤，因為它不占位置。

子絕父相的原理

• 子絕父相是在網(wǎng)頁布局經(jīng)常用到的一種方法柠横，就是子元素使用絕對定位窃款，父元素使用相對定位。為什么要這么做呢牍氛？
  • 首先要確定一點晨继，如果子元素要使用絕對定位，那么父元素也是必須要使用定位的搬俊，不然子元素就會以瀏覽器來移動了踱稍。
    然后父親定位的方式，首先排除靜態(tài)定位悠抹，因為靜態(tài)定位就是不定位珠月，根本不考慮。
    其次固定定位楔敌，因為固定定位不會隨著頁面滾動而滾動啤挎，這不符合正常布局理念，所以也排除。
    最后就剩絕對定位和相對定位了庆聘，正常情況下網(wǎng)頁都是以標準流的方式來顯示的胜臊，所以一個盒子它上下都會有盒子。當父元素也是用絕對定位伙判，那么它也不占位置了象对，就會影響下面的盒子，這也是不符合要求的宴抚。
    相對定位才能占位置勒魔，所以最后也是最佳的選擇就是父元素使用相對定位，這也就是子絕父相的由來菇曲。

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

• 因為絕對定位的盒子是脫標的冠绢，所以不能使用margin:0 auto;來實現(xiàn)水平居中，更不論垂直居中了常潮。所以要讓絕對定位的盒子垂直水平居中就要使用另一種方法：
  • 水平居中：先給盒子設(shè)置left:50%的左偏移弟胀，這樣盒子的左邊線就對齊父盒子的水平居中線，然后再讓盒子往左走自身一半的距離喊式，就實現(xiàn)了水平居中孵户。給盒子設(shè)置margin-left:自身一半的負值，就能讓盒子往左走自身的一半距離岔留。
  • 垂直居中：同理夏哭，先給盒子設(shè)置top:50%的上偏移，讓盒子的上邊框?qū)R垂直居中想贸诚，然后再讓盒子往上走自身一半的距離，就實現(xiàn)了垂直居中厕吉。給盒子設(shè)置margin-top:自身一半的負值酱固，就能讓盒子往上走自身的一半距離。