原文地址：浮動(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)排列的特征拗馒。也就是說路星，浮動(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è)栗子：
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)元素下方焚碌，所以顯示出來畦攘，父容器就把所有子元素都包括進(jìn)去了
另外，如果浮動(dòng)元素后面存在著不浮動(dòng)的塊元素十电，那么直接給后者添加clear: both屬性即可知押，不必添加空元素多此一舉。
方法二：after偽元素
after偽元素可以在父容器的尾部自動(dòng)創(chuàng)建一個(gè)子元素鹃骂，也就是說我們不必修改html台盯，可以直接通過css來添加新元素，達(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è)空白字符不顯示出來史隆。
- 由于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)顯示問題,不推薦使用雳刺。
.out{
overflow: auto;
zoom: 1; /*處理ie6兼容問題*/
}
方法四：父元素設(shè)置浮動(dòng)
給浮動(dòng)元素的容器也添加上浮動(dòng)屬性即可清除內(nèi)部浮動(dòng)劫灶，但是這樣會(huì)使其整體浮動(dòng)，影響布局掖桦，也容易出現(xiàn)新的浮動(dòng)問題本昏，不推薦使用。
.out{
float: left;
}
方法五：父元素設(shè)置display:table
將父容器變成表格可以清除浮動(dòng)枪汪，但是非表格內(nèi)容用table來裝凛俱，不符合標(biāo)簽語(yǔ)義化要求，還可能會(huì)出現(xiàn)未知問題料饥，故不推薦使用蒲犬。
.out{
display: table;
}
小結(jié)
據(jù)說浮動(dòng)誕生的時(shí)候主要是用來實(shí)現(xiàn)文字圍繞圖片的效果，但是后來越來越多的人用它來布局岸啡，雖說存在的即合理的原叮，用浮動(dòng)布局確實(shí)有它的道理和好處，但是對(duì)我來說巡蘸，我還是不太喜歡用浮動(dòng)來布局奋隶，絕對(duì)定位也是一樣，他們總給我一種不安全感悦荒，讓我覺得我的頁(yè)面不是一個(gè)整體唯欣，隨時(shí)都有可能崩壞“嵛叮總之打好基礎(chǔ)才是做出一個(gè)穩(wěn)定頁(yè)面的前提境氢，道阻且長(zhǎng)蟀拷。
