原文地址：浮動(dòng)與清除浮動(dòng)
浮動(dòng)
浮動(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)的特性
- 脫離文檔：元素設(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)排列的特征。也就是說(shuō)，浮動(dòng)可以設(shè)置寬高，并且能夠一行多個(gè)，類似于inline-block屬性的效果。
- 父元素高度坍塌：浮動(dòng)元素脫離了文檔流，并不占據(jù)文檔流的位置，自然父元素也就不能被撐開，所以沒(méi)了高度。
清除浮動(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è)栗子：
html：
<div class="out">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
css：
.out{
width: 300px;
border: 2px solid #55a532;
}
.box{
background-color: #f7c942;
height: 50px;
width: 50px;
}
上面是未設(shè)置浮動(dòng)時(shí)的效果，下面我們給容器里面的子元素設(shè)置向左浮動(dòng)：
.box{
background-color: #f7c942;
height: 50px;
width: 50px;
float: left;
}
我們可以看到，子元素設(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è)空元素
<div class="out">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="none"></div>
</div>
給空元素設(shè)置clear屬性
.none{
clear: both;
}
原理是設(shè)置clear后，父容器必須考慮非浮動(dòng)子元素的位置，而后者肯定出現(xiàn)在浮動(dòng)元素下方，所以顯示出來(lái)，父容器就把所有子元素都包括進(jìn)去了
另外，如果浮動(dòng)元素后面存在著不浮動(dòng)的塊元素，那么直接給后者添加clear: both屬性即可，不必添加空元素多此一舉。
方法二：after偽元素
after偽元素可以在父容器的尾部自動(dòng)創(chuàng)建一個(gè)子元素，也就是說(shuō)我們不必修改html，可以直接通過(guò)css來(lái)添加新元素，達(dá)到跟上一種方法同樣的效果。
.out:after {
content: "";
display: block;
height: 0;
clear: both;
}
.out{
zoom: 1;
}
- 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è)空白字符不顯示出來(lái)。
- 由于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)的效果。但是如果子元素的大小超過(guò)父容器的大小，就會(huì)出現(xiàn)顯示問(wèn)題,不推薦使用。
.out{
overflow: auto;
zoom: 1; /*處理ie6兼容問(wèn)題*/
}
方法四：父元素設(shè)置浮動(dòng)
給浮動(dòng)元素的容器也添加上浮動(dòng)屬性即可清除內(nèi)部浮動(dòng)，但是這樣會(huì)使其整體浮動(dòng)，影響布局，也容易出現(xiàn)新的浮動(dòng)問(wèn)題，不推薦使用。
.out{
float: left;
}
方法五：父元素設(shè)置display:table
將父容器變成表格可以清除浮動(dòng)，但是非表格內(nèi)容用table來(lái)裝，不符合標(biāo)簽語(yǔ)義化要求，還可能會(huì)出現(xiàn)未知問(wèn)題，故不推薦使用。
.out{
display: table;
}
小結(jié)
據(jù)說(shuō)浮動(dòng)誕生的時(shí)候主要是用來(lái)實(shí)現(xiàn)文字圍繞圖片的效果，但是后來(lái)越來(lái)越多的人用它來(lái)布局，雖說(shuō)存在的即合理的，用浮動(dòng)布局確實(shí)有它的道理和好處，但是對(duì)我來(lái)說(shuō)，我還是不太喜歡用浮動(dòng)來(lái)布局，絕對(duì)定位也是一樣，他們總給我一種不安全感，讓我覺得我的頁(yè)面不是一個(gè)整體，隨時(shí)都有可能崩壞。總之打好基礎(chǔ)才是做出一個(gè)穩(wěn)定頁(yè)面的前提，道阻且長(zhǎng)。
