在CSS布局中float屬性經(jīng)常會(huì)被用到屑宠，但使用float屬性后會(huì)使其在普通流中脫離父容器困檩，讓人很苦惱腰埂。
- 浮動(dòng)帶來(lái)布局的便利飒焦，卻也帶來(lái)了新問(wèn)題；
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clear float</title>
<style type="text/css">
.container{
margin: 30px auto;
width:600px;
height: 300px;
}
.p{
border:solid 3px #a33;
}
.c{
width: 100px;
height: 100px;
background-color: #060;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="p">
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
</div>
</div>
</body>
</html>
我們希望看到的效果是這樣的：
但結(jié)果卻是這樣的：
父容器并沒(méi)有把浮動(dòng)元素包圍起來(lái)盐固，俗稱(chēng)塌陷荒给，為了消除這種現(xiàn)象，我們需要一些清除浮動(dòng)的技巧刁卜。
- 如何清除浮動(dòng)
清除浮動(dòng)一般有倆種思路：
- 利用clear屬性志电，清除浮動(dòng)；
- 是父容器形成BFC蛔趴；
分別看一下：
2.1 利用clear屬性清除浮動(dòng)挑辆；
clear屬性是一個(gè)什么東東呢？clear屬性規(guī)定元素的那一側(cè)不允許其他浮動(dòng)元素孝情，修改一下剛才的代碼：
<div class="p">
<div class="c"></div>
<div class="c" style="clear:left;"></div>
<div class="c"></div>
第二個(gè)div添加了clear：left屬性后鱼蝉，其左側(cè)的div（第一個(gè)div）不再浮動(dòng)，我們可以利用這點(diǎn)在父容器的最后添加一個(gè)空的div箫荡，設(shè)置屬性clear：left魁亦，這樣就可以達(dá)到我們的目的了。
2.1.1 添加空的div清理浮動(dòng)
對(duì)我們剛才代碼稍作修改
<div class="p">
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
<div style="clear:left;"></div>
</div>
也就是在父容器的最后添加<div style="clear:both"></div>看看效果
果真好使了羔挡，有些同學(xué)看了后可能感覺(jué)奇怪洁奈，為什么想上一個(gè)例子修改第二個(gè)div
<div style="clear:left" class="c"></div>沒(méi)有變成這樣的效果
說(shuō)一下自己的拙見(jiàn)，clear：left屬性只是消除其左側(cè)div浮動(dòng)對(duì)自己造成的影響绞灼，而不會(huì)改變左側(cè)div甚至于父容器的表現(xiàn)利术，在父容器看來(lái)，三個(gè)div都還是浮動(dòng)的低矮，所以高度依舊是塌陷印叁。但是我們?cè)谧詈筇砑恿艘粋€(gè)非浮動(dòng)的div，由于它有clear：left屬性，所以它會(huì)按照左側(cè)div不浮動(dòng)來(lái)定位自己轮蜕，也就是定位到下一行昨悼，而父容器看到有一個(gè)非浮動(dòng)，普通流的子元素肠虽，會(huì)將其包圍幔戏，這樣造成了順便也把三個(gè)浮動(dòng)元素也包裹起來(lái)的效果，高度不再塌陷税课。
2.1.2 使用CSS插入效果
上面的做法瀏覽器兼容性不錯(cuò)闲延，但是有個(gè)很大的問(wèn)題就是向頁(yè)面添加了內(nèi)容來(lái)改變效果的目的，也就是數(shù)據(jù)和表現(xiàn)混淆韩玩，既然是變現(xiàn)垒玲，看看怎么使用CSS來(lái)解決這一問(wèn)題。根本的做法還是向父容器的最后追加元素找颓，但我們可以利用CSS的：after偽元素來(lái)做此事合愈。
添加一個(gè)floatfix
.floatfix::after{
content: ".";
display:block;
height:0;
visibility:hidden;
clear:left;
}
對(duì)父容器添加此類(lèi)
<div class="p floatfix">
<div class="c">1</div>
<div class="c">2</div>
<div class="c">3</div>
</div>
這樣我們就可以看到正確效果了
2.1.3 大師手筆
nicolas Gallagher在A new micro clearfix hack中提供了一種看起來(lái)更清爽的做法；
.floatfix::after{
content: "";
display:table;
clear:both;
}
2.2 使父容器形成BFC
BFC有三個(gè)特性：
- BFC會(huì)阻止外邊距（margin-top击狮、margin-bottom)折疊;
- 按照BFC的定義佛析，只有同屬于一個(gè)BFC時(shí)，倆個(gè)元素才有可能發(fā)生垂直Margin的重疊彪蓬，這個(gè)包括相鄰元素寸莫、嵌套元素，只要它們之間沒(méi)有阻擋（例如邊框档冬、非空內(nèi)容膘茎、padding；）就會(huì)發(fā)生margin重疊酷誓。
- 因此要解決margin重疊問(wèn)題披坏，只要讓它們不在同一個(gè)BFC就行了，但是對(duì)于倆個(gè)相鄰的元素來(lái)說(shuō)盐数，意義不大棒拂，沒(méi)有必要給它們加個(gè)外殼，但是對(duì)于嵌套元素來(lái)說(shuō)就很有必要了玫氢，只要把父元素設(shè)置為BFC就可以了帚屉。這樣子元素的margin就不會(huì)和父元素的margin發(fā)生重疊了。
- BFC不會(huì)重疊浮動(dòng)元素琐旁；
- BFC可以包含浮動(dòng)；
我們可以利用BFC的第三條特性來(lái)”清除浮動(dòng)“猜绣，這里其實(shí)說(shuō)清除浮動(dòng)已經(jīng)不再合適灰殴，應(yīng)該說(shuō)包含浮動(dòng)。也就是說(shuō)只要父容器形成BFC就可以，簡(jiǎn)單看看如何形成BFC
- float為left | right牺陶；
- overflow為 hidden | auto | scroll伟阔；
- display為 table-cell | table-caption | inline-block;
- position為 absolute | fixed;
我們可以對(duì)父容器添加這些屬性來(lái)形成BFC達(dá)到”清除浮動(dòng)“的效果
2.2.1 利用float來(lái)使父容器形成BFC
<div class="p" style="float:left;">
<div class="c">1</div>
<div class="c">2</div>
<div class="c">3</div>
我們可以看到父容器高度沒(méi)有塌陷，但是長(zhǎng)度變短了掰伸，因?yàn)閐iv應(yīng)用float后會(huì)根據(jù)內(nèi)容來(lái)改變長(zhǎng)度皱炉，這個(gè)在很多時(shí)候有用。
2.2.2 使用BFC的其他局限
上面提到使用BFC使用float的時(shí)候會(huì)使父容器的長(zhǎng)度縮短狮鸭，而且還有一個(gè)重要缺陷——父容器float解決了其塌陷問(wèn)題合搅，那么父容器的父容器怎么辦？難道要全部使用float嗎（確實(shí)有這種布局方式）歧蕉。BFC的幾種布局方式都有自己的問(wèn)題灾部，overflow會(huì)影響滾動(dòng)條和絕對(duì)定位的元素；position會(huì)改變?cè)氐亩ㄎ环绞焦咄耍@是我們不希望的赌髓，display這幾種凡是依然沒(méi)有解決低版本IE問(wèn)題……
2.2.3 haslayout
我們知道在IE6、7內(nèi)有個(gè)hasLayout的概念催跪，很多bug正式由hasLayout導(dǎo)致的锁蠕，當(dāng)元素的hasLayout屬性值為false的時(shí)候，元素的尺寸和位置由最近擁有布局的祖先元素控制懊蒸。當(dāng)元素的hasLayout屬性值為true的時(shí)候會(huì)達(dá)到和BFC類(lèi)似的效果荣倾，元素負(fù)責(zé)本身及其子元素的尺寸設(shè)置和定位。我們可以利用這點(diǎn)兒在IE6、7下完成清浮動(dòng)萝喘，先看看怎么使元素hasLayout為true
position: absolute
float: left|right
display: inline-block
width: 除 “auto” 外的任意值
height: 除 “auto” 外的任意值
zoom: 除 “normal” 外的任意值
writing-mode: tb-rl
在IE7中使用overflow: hidden|scroll|auto 也可以使hasLayout為true
3 一個(gè)相對(duì)靠譜的解決方案
- 在IE+蜈首、現(xiàn)代瀏覽器上使用偽元素；
- 在IE6抡笼、7使用haslayout;
.floatfix{
*zoom:1;
}
.floatfix:after{
content:"";
display:table;
clear:both;
}
參考文獻(xiàn)——CSS清浮動(dòng)處理（Clear與BFC）
