當元素使用float屬性善涨，將脫離文檔流廊散，因此父元素便不會包圍它由桌。
<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;
}
此時瀏覽器中顯示:
圖1.這是常規(guī)文檔流偿渡，可以看到塊級元素section包圍左欄和右欄元素，頁面自上而下堆疊在一起
當對左欄加入css樣式：float:left岖是；瀏覽器中顯示變?yōu)?/strong>
圖2.浮動左欄后帮毁，父元素section只能包住右欄，因為左欄已經(jīng)脫離了文檔流,于是footer也被提了上來豺撑，緊挨著前一個塊級元素section
如果想父元素仍然要包圍浮動的子元素烈疚，有三種方法：
- 為父元素設置overflow：hidden
將section設置為：
section{
border: 1px solid #333333;
margin:0 0 100px 0;
overflow: hidden;
}
圖3.給父元素應用了overflow：hidden后，父元素又包圍了浮動的左欄
這是overflow除了常規(guī)應用的另一個作用聪轿，它可靠的迫使父元素包含其浮動的子元素爷肝。
2.同時浮動父元素
第二種促使父元素包圍子元素的方法是讓父元素也浮動起來。
section{
border: 1px solid #333333;
margin:0 0 10px 0;
float:left;
width: 100%;
}
浮動section后陆错，不管子元素是否浮動灯抛，它都會緊緊包圍住自己的子元素。因此音瓷，需要用width：100%再讓section與瀏覽器同寬对嚼。
????此時由于section也脫離了文檔流，footer會努力向上擠到它旁邊绳慎，因此給footer應用clear：left纵竖；這樣即可和第一種方法取到同樣的效果。
3.添加非浮動的清除元素
????第三種方法是給父元素最后添加一個非浮動的子元素偷线，然后清除該子元素。由于父元素一定會包含非浮動的子元素沽甥，通過把這個子元素放在浮動元素的下方声邦，就可以保證父元素一定會包住這個元素，同時也會包住前面的浮動元素摆舟。
<section>
<div class="左欄">
我是左欄
我是左欄
我是左欄
我是左欄
</div>
<div class="右欄">
我是右欄
</div>
<div class="clear_me">
</div>
</section>
<footer>我是頁腳</footer>
給新添加的元素添加CSS樣式：
.clear_me{
clear:left;
}
這樣亥曹，浮動的元素就被父元素包圍住了邓了，如圖3所示。
如果不想添加這個純表現(xiàn)性的元素媳瞪，還有一個用CSS來添加這個清除元素的方法骗炉。
首先，給section添加一個類
<section class="clearfix">
<div class="左欄">
我是左欄
我是左欄
我是左欄
我是左欄
</div>
<div class="右欄">
我是右欄
</div>
</section>
接著給這個clearfix類使用這個規(guī)則：
.clearfix:after{
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
這樣蛇受，浮動的元素又像圖1一樣被父元素包住了句葵。這個clearfix規(guī)則最早是由程序員Tony Aslett發(fā)明的，它只添加了一個內容為句點的元素(句點是最小的內容)兢仰。
總結一下
強迫父元素包含其浮動子元素的方法有三種：
- 為父元素設置overflow：hidden乍丈；
- 浮動父元素，并且設置寬度width：100%把将；其后的元素要設置clear：both轻专；
- 父元素內容末尾添加非浮動子元素，可以直接加一個空元素察蹲，也可以使用clearfix偽類添加请垛。
