圍住浮動元素的三種方法

方法一：爲父元素添加 overflow:hidden
第一個方法很簡單，缺點是不太直觀，即爲父元素應用 overflow:hidden ，以強制它

包圍浮動元素。

方法二：同時浮動父元素
第二種促使父元素包圍其浮動子元素的方法，是也讓父元素浮動起來。
section {border:1px solid blue;  float:left; width:100%; ;}
img {float:left;}
footer {border:1px solid red;  clear:left;}
浮動 section 之後，無論其子元素是否浮動，它都會牢牢地包圍（也稱收縮包裹）住
它的子元素。所以，須要用 width:100% 再讓 section 與瀏覽器容器同寬。另外，由
於 section 如今也浮動了，因此 footer 會努力往上擠到它旁邊去。爲了強制 footer
依然呆在 section 下方， 要給它應用 clear:left 。 被清除的元素不會被提高到浮動元
素的旁邊。

方法三：添加非浮動的清除元素
第三種強制父元素包含其浮動子元素的方法，就是給父元素的最後添加一個非浮動的
子元素，而後清除該子元素。因爲包含元素必定會包圍非浮動的子元素，並且清除會
讓這個子元素位於（清除一側）浮動元素的下方，所以包含元素必定會包含這個子元
素——以及前面的浮動元素。在包含元素最後添加子元素做爲清除元素的方式有兩種。
第一種方式不太理想，也就是簡單地在 HTML 標記中添加一個子元素，並給它應用
clear 屬性。因爲沒有默認的樣式，不會引入多餘空間， div 元素很適合這個目的。
<section>
<img src="images/rubber_duck.jpg">
<p>It's fun to float.</p>
<div class="clear_me"></div>
</section>
<footer> Here is the footer element…</footer>
在此，我爲 div 添加了一個類，以便於在 CSS中添加它。
section {border:1px solid blue;}
img {float:left;}
.clear_me {clear:left;}
footer {border:1px solid red;}
這樣，浮動的元素被父元素包圍住了，結果如圖 3-20 所示。若是你特別不想添加這
個純表現性元素，我再告訴你一個用 CSS 來添加這個清除元素的方法。首先，要給
section 添加一個類。
<section  class="clearfix">
<img src="images/rubber_duck.jpg">
<p>It's fun to float.</p>
</section>
<footer> Here is the footer element…</footer>
而後，再使用這個神奇的 clearfix規則！
.clearfix:after {
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}