浮動(dòng)
浮動(dòng)元素會(huì)脫離文檔流并向左/向右浮動(dòng)，直到碰到父元素或者另一個(gè)浮動(dòng)元素糊渊。?
float：left | right | none | inherit? ? ? ? ?
舉個(gè)例子:
當(dāng)框 1 向右浮動(dòng)時(shí)租副，它脫離文檔流并且向右移動(dòng)舟茶，直到它的右邊緣碰到包含框的右邊緣热幔。?
當(dāng)框 1 向左浮動(dòng)時(shí)喷鸽，它脫離文檔流并且向左移動(dòng)众雷，直到它的左邊緣碰到包含框的左邊緣。因?yàn)樗辉偬幱谖臋n流中做祝，所以它不占據(jù)空間砾省，框2填補(bǔ)了它的位置且被覆蓋，使框 2 從視圖中消失混槐。?
如果把所有三個(gè)框都向左浮動(dòng)编兄，那么框 1 向左浮動(dòng)直到碰到包含框，另外兩個(gè)框向左浮動(dòng)直到碰到前一個(gè)浮動(dòng)框声登。
當(dāng)框 1 向右浮動(dòng)時(shí)狠鸳，它脫離文檔流并且向右移動(dòng)，直到它的右邊緣碰到包含框的右邊緣悯嗓。
當(dāng)框 1 向左浮動(dòng)時(shí)件舵，它脫離文檔流并且向左移動(dòng)，直到它的左邊緣碰到包含框的左邊緣脯厨。因?yàn)樗辉偬幱谖臋n流中铅祸，所以它不占據(jù)空間，框2填補(bǔ)了它的位置且被覆蓋合武，使框 2 從視圖中消失临梗。
如果把所有三個(gè)框都向左浮動(dòng)，那么框 1 向左浮動(dòng)直到碰到包含框稼跳，另外兩個(gè)框向左浮動(dòng)直到碰到前一個(gè)浮動(dòng)框盟庞。
浮動(dòng)的特性
脫離文檔：元素設(shè)置為浮動(dòng)后脫離文檔流，并不占據(jù)空間汤善，而此浮動(dòng)元素在文檔流空出的位置什猖，由后續(xù)的非浮動(dòng)元素填充，塊級(jí)元素直接填充上去红淡，內(nèi)聯(lián)元素則有空隙就插入卸伞。
浮動(dòng)可以內(nèi)聯(lián)排列：浮動(dòng)會(huì)向左/向右浮動(dòng)，直到碰到另一個(gè)浮動(dòng)元素為止锉屈，這是浮動(dòng)可以內(nèi)聯(lián)排列的特征。也就是說垮耳，浮動(dòng)可以設(shè)置寬高颈渊，并且能夠一行多個(gè)遂黍，類似于inline-block屬性的效果。
父元素高度坍塌：浮動(dòng)元素脫離了文檔流俊嗽，并不占據(jù)文檔流的位置雾家，自然父元素也就不能被撐開，所以沒了高度绍豁。
清除浮動(dòng)
清除浮動(dòng)的概念
在非IE瀏覽器（如Firefox）下芯咧，當(dāng)容器的高度為auto，且容器的內(nèi)容中有浮動(dòng)（float為left或right）的元素竹揍，在這種情況下敬飒，容器的高度不能自動(dòng)伸長(zhǎng)以適應(yīng)內(nèi)容的高度，使得內(nèi)容溢出到容器外面而影響（甚至破壞）布局的現(xiàn)象芬位。這個(gè)現(xiàn)象叫浮動(dòng)溢出无拗，為了防止這個(gè)現(xiàn)象的出現(xiàn)而進(jìn)行的CSS處理，就叫CSS清除浮動(dòng)昧碉。
舉個(gè)栗子：
上面是未設(shè)置浮動(dòng)時(shí)的效果英染，下面我們給容器里面的子元素設(shè)置向左浮動(dòng)：
我們可以看到，子元素設(shè)置浮動(dòng)后父元素只剩下了重合后的邊框被饿，這是因?yàn)樵孛撾x了文檔流四康，不能撐開父元素，所以父元素的高度坍塌了狭握，而子元素也溢出到容器外面闪金，這就是浮動(dòng)溢出現(xiàn)象。要消除這個(gè)現(xiàn)象就得清除浮動(dòng)哥牍。
清除浮動(dòng)的方法
方法一：添加帶clear屬性的空元素
clear 屬性規(guī)定元素的哪一側(cè)不允許其他浮動(dòng)元素毕泌。
clear ：left|right|both|none|inherit
我們給浮動(dòng)元素后面添加一個(gè)空元素
給空元素設(shè)置clear屬性
.none{clear:both;}?
原理是設(shè)置clear后，父容器必須考慮非浮動(dòng)子元素的位置嗅辣，而后者肯定出現(xiàn)在浮動(dòng)元素下方撼泛，所以顯示出來，父容器就把所有子元素都包括進(jìn)去了
另外澡谭，如果浮動(dòng)元素后面存在著不浮動(dòng)的塊元素愿题，那么直接給后者添加clear: both屬性即可，不必添加空元素多此一舉蛙奖。
方法二：after偽元素
after偽元素可以在父容器的尾部自動(dòng)創(chuàng)建一個(gè)子元素潘酗，也就是說我們不必修改html，可以直接通過css來添加新元素雁仲，達(dá)到跟上一種方法同樣的效果仔夺。
content屬性，表示偽元素的內(nèi)容,設(shè)置:before和:after時(shí)必須設(shè)置其content屬性攒砖，否則偽元素就不起作用缸兔，本例content: ""表示給父元素結(jié)尾放了一個(gè)空白字符日裙。
after添加的內(nèi)容默認(rèn)是inline元素，但是行內(nèi)元素會(huì)找空隙插入浮動(dòng)元素惰蜜，依然撐不起父容器高度昂拂，所以我們需要把插入的元素設(shè)置成塊元素block。
height: 0是讓這個(gè)這個(gè)空白字符不顯示出來抛猖。
由于IE6不支持after格侯，我們添加一條IE6的獨(dú)有命令"zoom:1"就行了，這條命令的作用是觸發(fā)父元素的"hasLayout"屬性（即令hasLayout的值為true）财著，讓父元素?fù)碛凶约旱牟季至模琁E6會(huì)讀取這條命令，其他瀏覽器則會(huì)直接忽略它瓢宦。 （haslayout為true時(shí)碎连，它就不得不去渲染它自己，因此元素不得不擴(kuò)展去包含它的流出的內(nèi)容驮履，例如浮動(dòng)鱼辙，而zoom:1是最常用，最安全玫镐，成本最少的觸發(fā)hasLayout的方式倒戏。）
方法三：父元素設(shè)置overflow: auto/hidden
給浮動(dòng)元素的父元素添加overflow: auto或者overflow: hidden屬性之后會(huì)自動(dòng)計(jì)算超出的大小，所以父容器會(huì)自動(dòng)撐開自己把所有的子元素放進(jìn)去恐似，浮動(dòng)元素也回到了容器層杜跷，達(dá)到了清理浮動(dòng)的效果。但是如果子元素的大小超過父容器的大小矫夷，就會(huì)出現(xiàn)顯示問題,不推薦使用葛闷。
方法四：父元素設(shè)置浮動(dòng)
給浮動(dòng)元素的容器也添加上浮動(dòng)屬性即可清除內(nèi)部浮動(dòng)，但是這樣會(huì)使其整體浮動(dòng)双藕，影響布局淑趾，也容易出現(xiàn)新的浮動(dòng)問題，不推薦使用忧陪。
方法五：父元素設(shè)置display:table
將父容器變成表格可以清除浮動(dòng)扣泊，但是非表格內(nèi)容用table來裝，不符合標(biāo)簽語義化要求嘶摊，還可能會(huì)出現(xiàn)未知問題延蟹，故不推薦使用。
float小結(jié)：
對(duì)于浮動(dòng)叶堆，需要了解的是：
*浮動(dòng)會(huì)將元素從文檔流中刪除阱飘，他的空間會(huì)被其它元素補(bǔ)上。
*浮動(dòng)的參數(shù)物是父元素，是在父元素這個(gè)容器中飄俯萌。
*為了清除浮動(dòng)造成的對(duì)浮動(dòng)元素之后元素的影響果录，我們?cè)诟?dòng)元素之后加一個(gè)div，并將這個(gè)div的clear設(shè)置為both咐熙。
*如果兩個(gè)元素都設(shè)置了浮動(dòng)，則兩個(gè)元素并不會(huì)重疊辨萍，第一個(gè)元素占據(jù)一定空間棋恼，第二個(gè)元素緊跟其后。如果不想讓第二個(gè)元素緊跟其后锈玉，可以對(duì)第二個(gè)浮動(dòng)的元素使用clear爪飘。
