普通流
CSS有三種定位機(jī)制旭斥，普通流（標(biāo)準(zhǔn)流）、浮動(dòng)古涧、定位垂券。
普通流、標(biāo)準(zhǔn)流羡滑、文檔流實(shí)際上就是一個(gè)網(wǎng)頁內(nèi)標(biāo)簽元素從上到下菇爪，從左到右排列順序的意思，按照這種大前提的布局排列之下絕對不會(huì)出現(xiàn)例外的情況叫做普通流布局柒昏。
浮動(dòng)
??元素的浮動(dòng)是指設(shè)置了浮動(dòng)屬性的元素會(huì)脫離標(biāo)準(zhǔn)普通流的控制凳宙，移動(dòng)到其父元素中指定位置的過程，浮動(dòng)的元素總是找離它最近的父級元素對齊职祷，不會(huì)壓住父盒子的padding和margin值的氏涩。
left 元素向左浮動(dòng)
right 元素向右浮動(dòng)
none 元素不浮動(dòng)
??浮動(dòng)元素的排列位置跟上一個(gè)元素有關(guān)系，如果上一個(gè)元素有浮動(dòng)有梆，那么浮動(dòng)元素的頂部會(huì)跟上一個(gè)元素的頂部在同一高度是尖，浮動(dòng)元素左側(cè)和上一個(gè)元素的右側(cè)緊挨；如果上一個(gè)元素是標(biāo)準(zhǔn)流泥耀，則浮動(dòng)元素的頂部會(huì)和上一個(gè)元素的底部對齊饺汹。
總結(jié)：
??一個(gè)父盒子里面的子盒子，如果其中一個(gè)子級有浮動(dòng)痰催，則其他子集都需要浮動(dòng)兜辞，這樣才能一行對齊顯示迎瞧；
??元素添加浮動(dòng)后，元素會(huì)具有行內(nèi)塊元素的特性弦疮，元素的大小完全取決于定義的大小或者默認(rèn)的內(nèi)容多少夹攒；
??浮動(dòng)根據(jù)元素書寫的位置來顯示相應(yīng)的浮動(dòng)。
感踩：加了浮動(dòng)的元素盒子是浮動(dòng)起來的咏尝，漂浮在其他的標(biāo)準(zhǔn)流盒子上面；
漏：加了浮動(dòng)的盒子啸罢，不占位置编检，它浮起來了，原來的位置漏給了標(biāo)準(zhǔn)流的盒子扰才；
特：這是特殊的使用允懂，有很多不好處，使用要謹(jǐn)慎衩匣。
清除浮動(dòng)的方法
??正常標(biāo)準(zhǔn)流盒子下蕾总，子盒子是標(biāo)準(zhǔn)流，父盒子雖然沒有高度琅捏，但是會(huì)撐開父盒子的高度生百；但當(dāng)子盒子浮動(dòng)時(shí)，就會(huì)脫離正常標(biāo)準(zhǔn)流柄延，父盒子沒有設(shè)置高度蚀浆，高度就為0，不會(huì)撐開父盒子搜吧。父盒子外邊如果有盒子的話就會(huì)上移市俊。所以可以清除浮動(dòng)。
??其實(shí)本質(zhì)叫做閉合浮動(dòng)更好一些滤奈，清除浮動(dòng)就是把浮動(dòng)的盒子圈到里面摆昧，讓父盒子閉合出口和入口不讓他們出來影響其他元素。在css中蜒程，clear屬性用于清除浮動(dòng)绅你。
額外標(biāo)簽法
W3C推薦的做法是，在浮動(dòng)盒子的后面添加一個(gè)空盒子搞糕。
<div class=’clear’></div>
.clear{
clear:both;
}
優(yōu)點(diǎn)：
通俗易懂勇吊，書寫方便
缺點(diǎn)：
添加許多無意義的標(biāo)簽曼追，結(jié)構(gòu)化比較差窍仰。
父元素添加overflow屬性
overflow:hide/auto/scroll
觸發(fā)BFC，BFC可以清除浮動(dòng)
優(yōu)點(diǎn)：
代碼簡潔
缺點(diǎn)：
內(nèi)容增多時(shí)容易造成不會(huì)自動(dòng)換行導(dǎo)致內(nèi)容被隱藏掉礼殊，無法顯示需要溢出的元素驹吮。
使用after偽元素清除浮動(dòng)
在父元素上面設(shè)置
.clearfix:after {
content:’.’;
display:block;
height:0;
visibility:hidden;
clear:both;
}
.clearfix{
*zoom:1;
}
*代表ie6针史、7能識(shí)別的特殊符號，帶有這個(gè)*的屬性碟狞，只有ie6啄枕、7才能執(zhí)行；
zoom就是ie6族沃、7清除浮動(dòng)的方法频祝。
優(yōu)點(diǎn)：
符合閉合浮動(dòng)思想，結(jié)構(gòu)語義化正確
缺點(diǎn)：
由于ie6脆淹、7不支持after常空，使用zoom觸發(fā)
雙偽元素清除浮動(dòng)
.clearfix:before, .clearfix:after{
content:’’;
display:table; //觸發(fā)bfc防止外邊距合并問題
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}
優(yōu)點(diǎn)：
代碼更簡潔
缺點(diǎn)：
由于ie6、7不支持after盖溺，使用zoom觸發(fā)hasLayout
