當(dāng)元素使用float屬性，將脫離文檔流，因此父元素便不會(huì)包圍它。
<section>
<div class="左欄">
我是左欄
我是左欄
我是左欄
我是左欄
</div>
<div class="右欄">
我是右欄
</div>
</section>
<footer>我是頁腳</footer>
CSS樣式如下：
section{
border: 1px solid #333333;
margin:0 0 10px 0;
}
.左欄{
width: 100px;
border: 1px solid #333333;
}
footer{
border: 1px solid #333333;
}
此時(shí)瀏覽器中顯示:
當(dāng)對(duì)左欄加入css樣式：float:left；瀏覽器中顯示變?yōu)?/strong>
如果想父元素仍然要包圍浮動(dòng)的子元素，有三種方法：
- 為父元素設(shè)置overflow：hidden
將section設(shè)置為：
section{
border: 1px solid #333333;
margin:0 0 100px 0;
overflow: hidden;
}
這是overflow除了常規(guī)應(yīng)用的另一個(gè)作用，它可靠的迫使父元素包含其浮動(dòng)的子元素。
2.同時(shí)浮動(dòng)父元素
第二種促使父元素包圍子元素的方法是讓父元素也浮動(dòng)起來。
section{
border: 1px solid #333333;
margin:0 0 10px 0;
float:left;
width: 100%;
}
浮動(dòng)section后，不管子元素是否浮動(dòng)，它都會(huì)緊緊包圍住自己的子元素。因此，需要用width：100%再讓section與瀏覽器同寬。
????此時(shí)由于section也脫離了文檔流，footer會(huì)努力向上擠到它旁邊，因此給footer應(yīng)用clear：left；這樣即可和第一種方法取到同樣的效果。
3.添加非浮動(dòng)的清除元素
????第三種方法是給父元素最后添加一個(gè)非浮動(dòng)的子元素，然后清除該子元素。由于父元素一定會(huì)包含非浮動(dòng)的子元素，通過把這個(gè)子元素放在浮動(dòng)元素的下方，就可以保證父元素一定會(huì)包住這個(gè)元素，同時(shí)也會(huì)包住前面的浮動(dòng)元素。
<section>
<div class="左欄">
我是左欄
我是左欄
我是左欄
我是左欄
</div>
<div class="右欄">
我是右欄
</div>
<div class="clear_me">
</div>
</section>
<footer>我是頁腳</footer>
給新添加的元素添加CSS樣式：
.clear_me{
clear:left;
}
這樣，浮動(dòng)的元素就被父元素包圍住了，如圖3所示。
如果不想添加這個(gè)純表現(xiàn)性的元素，還有一個(gè)用CSS來添加這個(gè)清除元素的方法。
首先，給section添加一個(gè)類
<section class="clearfix">
<div class="左欄">
我是左欄
我是左欄
我是左欄
我是左欄
</div>
<div class="右欄">
我是右欄
</div>
</section>
接著給這個(gè)clearfix類使用這個(gè)規(guī)則：
.clearfix:after{
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
這樣，浮動(dòng)的元素又像圖1一樣被父元素包住了。這個(gè)clearfix規(guī)則最早是由程序員Tony Aslett發(fā)明的，它只添加了一個(gè)內(nèi)容為句點(diǎn)的元素(句點(diǎn)是最小的內(nèi)容)。
總結(jié)一下
強(qiáng)迫父元素包含其浮動(dòng)子元素的方法有三種：
- 為父元素設(shè)置overflow：hidden；
- 浮動(dòng)父元素，并且設(shè)置寬度width：100%；其后的元素要設(shè)置clear：both；
- 父元素內(nèi)容末尾添加非浮動(dòng)子元素，可以直接加一個(gè)空元素，也可以使用clearfix偽類添加。
