css清除浮動

　　初學css，一直被清除浮動困擾。好多不同解決方案，卻說不清解決的是什麼。看罷《CSS權威指南》，總算有點頭緒了。將3.3.2文章粘貼以下：

　　浮動元素脫離了文檔流,其父元素也看不到它了,於是也不會包圍它。這種狀況有
時候並不是咱們想要的,本節向你們傳授三種圍住浮動子元素的方法。記住,這三種
方法你都得掌握,這樣才能審時度勢,選擇最合適的一種。

　　爲了演示浮動元素的行爲,這種行爲對佈局會產生什麼影響,以及解決這個問題的
三種方法,咱們首先要從一張帶標題的圖片開始。圖片和標籤包含在一個 section
元素中,而 section 元素後面跟着一個 footer 元素。能夠把這個 footer 元素想象成
不少網頁底部都會有的與頁面同寬的頁腳。
<section>
<img src="images/rubber_duck2.jpg">
<p>It's fun to float.</p>
</section>
<footer> Here is the footer element that runs across the bottom of the
page.

</footer>

　　這樣,你纔會知道究竟會發生什麼。應用如下規則後的 section 和
footer 的元素盒子。
section {border:1px solid blue; margin:0 0 10px 0;}
/*刪除默認的上下外邊距*/
p {margin 0;}
/*爲簡明起見,省略了字體聲明*/
footer {border:1px solid red;}
　　能夠看到頁面中的兩個塊級元素 section 和 footer,前者包含一張圖片及標題,
後者在常規文檔流中位於前者下方

　　如今咱們看到的是常規文檔流,即塊級元素包圍着全部子元素,並且在頁面中自上
而下相互堆疊在一塊兒。假設咱們想讓圖片標題位於圖片右側,而不是像如今這樣位
於下方。運用剛剛學到的知識,咱們知道實現這個目標最簡單的方式就是浮動圖片。
試試看吧。
section {border:1px solid blue; margin:0 0 10px 0;}
img {float:left;}
footer {border:1px solid red;}
浮動圖片後標題跑到了右邊,但父元素 section 也收縮到只包含文本的高度高度
定位元素
媽呀!標題卻是跑到右邊了,可 section 也再也不包圍浮動元素了,它只包圍非浮動的
元素。因而,footer 被提了上來,緊挨着前一個塊級元素——section。這樣是沒錯
兒,可結果呢,不是咱們想要的。
方法一:爲父元素添加 overflow:hidden
第一個方法很簡單,缺點是不太直觀,即爲父元素應用 overflow:hidden,以強制它
包圍浮動元素。
section {border:1px solid blue; margin:0 0 10px 0; overflow:hidden;}
img {float:left;}
p {border:1px solid red;}
把 overflow:hidden 聲明應用到容器元素後,footer 又回到了咱們指望的位置,如圖
3-20 所示。
圖 3-20 給容器元素應用 overflow:hidden 聲明後,它又包圍了浮動元素
實際上,overflow:hidden 聲明的真正用途是防止包含元素被超大內容撐大。應用
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。
被清除的元素不會被提高到浮動元
素的旁邊。以上代碼能獲得與圖 3-20 相同的效果。

方法三:添加非浮動的清除元素
第三種強制父元素包含其浮動子元素的方法,就是給父元素的最後添加一個非浮動的
子元素,而後清除該子元素。因爲包含元素必定會包圍非浮動的子元素,並且清除會
讓這個子元素位於(清除一側)浮動元素的下方,所以包含元素必定會包含這個子元
素——以及前面的浮動元素。在包含元素最後添加子元素做爲清除元素的方式有兩種。

第一種方式不太理想,也就是簡單地在 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 規則!