在CSS布局中float屬性經常會被用到，但使用float屬性后會使其在普通流中脫離父容器，讓人很苦惱。
- 浮動帶來布局的便利，卻也帶來了新問題；
<!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>
我們希望看到的效果是這樣的：
但結果卻是這樣的：
父容器并沒有把浮動元素包圍起來，俗稱塌陷，為了消除這種現(xiàn)象，我們需要一些清除浮動的技巧。
- 如何清除浮動
清除浮動一般有倆種思路：
- 利用clear屬性，清除浮動；
- 是父容器形成BFC；
分別看一下：
2.1 利用clear屬性清除浮動；
clear屬性是一個什么東東呢？clear屬性規(guī)定元素的那一側不允許其他浮動元素，修改一下剛才的代碼：
<div class="p">
<div class="c"></div>
<div class="c" style="clear:left;"></div>
<div class="c"></div>
第二個div添加了clear：left屬性后，其左側的div（第一個div）不再浮動，我們可以利用這點在父容器的最后添加一個空的div，設置屬性clear：left，這樣就可以達到我們的目的了。
2.1.1 添加空的div清理浮動
對我們剛才代碼稍作修改
<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>看看效果
果真好使了，有些同學看了后可能感覺奇怪，為什么想上一個例子修改第二個div
<div style="clear:left" class="c"></div>沒有變成這樣的效果
說一下自己的拙見，clear：left屬性只是消除其左側div浮動對自己造成的影響，而不會改變左側div甚至于父容器的表現(xiàn)，在父容器看來，三個div都還是浮動的，所以高度依舊是塌陷。但是我們在最后添加了一個非浮動的div，由于它有clear：left屬性，所以它會按照左側div不浮動來定位自己，也就是定位到下一行，而父容器看到有一個非浮動，普通流的子元素，會將其包圍，這樣造成了順便也把三個浮動元素也包裹起來的效果，高度不再塌陷。
2.1.2 使用CSS插入效果
上面的做法瀏覽器兼容性不錯，但是有個很大的問題就是向頁面添加了內容來改變效果的目的，也就是數(shù)據(jù)和表現(xiàn)混淆，既然是變現(xiàn)，看看怎么使用CSS來解決這一問題。根本的做法還是向父容器的最后追加元素，但我們可以利用CSS的：after偽元素來做此事。
添加一個floatfix
.floatfix::after{
content: ".";
display:block;
height:0;
visibility:hidden;
clear:left;
}
對父容器添加此類
<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中提供了一種看起來更清爽的做法；
.floatfix::after{
content: "";
display:table;
clear:both;
}
2.2 使父容器形成BFC
BFC有三個特性：
- BFC會阻止外邊距（margin-top、margin-bottom)折疊;
- 按照BFC的定義，只有同屬于一個BFC時，倆個元素才有可能發(fā)生垂直Margin的重疊，這個包括相鄰元素、嵌套元素，只要它們之間沒有阻擋（例如邊框、非空內容、padding；）就會發(fā)生margin重疊。
- 因此要解決margin重疊問題，只要讓它們不在同一個BFC就行了，但是對于倆個相鄰的元素來說，意義不大，沒有必要給它們加個外殼，但是對于嵌套元素來說就很有必要了，只要把父元素設置為BFC就可以了。這樣子元素的margin就不會和父元素的margin發(fā)生重疊了。
- BFC不會重疊浮動元素；
- BFC可以包含浮動；
我們可以利用BFC的第三條特性來”清除浮動“，這里其實說清除浮動已經不再合適，應該說包含浮動。也就是說只要父容器形成BFC就可以，簡單看看如何形成BFC
- float為left | right；
- overflow為 hidden | auto | scroll；
- display為 table-cell | table-caption | inline-block;
- position為 absolute | fixed;
我們可以對父容器添加這些屬性來形成BFC達到”清除浮動“的效果
2.2.1 利用float來使父容器形成BFC
<div class="p" style="float:left;">
<div class="c">1</div>
<div class="c">2</div>
<div class="c">3</div>
我們可以看到父容器高度沒有塌陷，但是長度變短了，因為div應用float后會根據(jù)內容來改變長度，這個在很多時候有用。
2.2.2 使用BFC的其他局限
上面提到使用BFC使用float的時候會使父容器的長度縮短，而且還有一個重要缺陷——父容器float解決了其塌陷問題，那么父容器的父容器怎么辦？難道要全部使用float嗎（確實有這種布局方式）。BFC的幾種布局方式都有自己的問題，overflow會影響滾動條和絕對定位的元素；position會改變元素的定位方式，這是我們不希望的，display這幾種凡是依然沒有解決低版本IE問題……
2.2.3 haslayout
我們知道在IE6、7內有個hasLayout的概念，很多bug正式由hasLayout導致的，當元素的hasLayout屬性值為false的時候，元素的尺寸和位置由最近擁有布局的祖先元素控制。當元素的hasLayout屬性值為true的時候會達到和BFC類似的效果，元素負責本身及其子元素的尺寸設置和定位。我們可以利用這點兒在IE6、7下完成清浮動，先看看怎么使元素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 一個相對靠譜的解決方案
- 在IE+、現(xiàn)代瀏覽器上使用偽元素；
- 在IE6、7使用haslayout;
.floatfix{
*zoom:1;
}
.floatfix:after{
content:"";
display:table;
clear:both;
}
參考文獻——CSS清浮動處理（Clear與BFC）
