CSS圍住浮動元素的三種方法

2gua發表於2013-03-09
CSS

對CSS圍住浮動元素的三種方法總結一下。
先給出總結性方法 - 圍住浮動元素的三種方法：

  • 第一個方法很簡單，缺點是不太直觀，即為父元素應用overflow:hidden，以強制它包圍浮動元素。
  • 第二種促使父元素包圍其浮動子元素的方法，是也讓父元素浮動起來。
  • 第三種新增非浮動的清除元素：第三種強制父元素包含其浮動子元素的方法，就是給父元素的最後新增一個非浮動的子元素，然後清除該子元素。
    • div元素
    • 使用clearfix規則

問題的提出
程式碼： 

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Examples</title>
   <style>

   section {border:1px solid blue; margin:0 0 10px 0;}
   p {margin 0;}
   footer {border:1px solid red;}
   img {float:left;}
   </style>
</head>
<body>
   <section> 
       <img src="./碼農.gif" />
       <p>It's fun to float.</p>
   </section> 
   <footer> Here is the footer element that runs across the bottom of the page.</footer> 
</body>
</html>

執行如下：
enter image description here

footer被提了上來，這不是我們想要的。這是因為section只包含非浮動元素了，它管不了浮動元素（圖片），footer必然緊跟著section。但文字還是環繞著圖片。
如何能讓section包含浮動元素，從而讓footer放在section（圖片）下面呢？就是我們前面提到的三種方法。

第一種：給section的樣式新增如下“overflow:hidden;”程式碼。 

section {border:1px solid blue; margin:0 0 10px 0; overflow:hidden;}

第二種：浮動父元素，同時footer應用clear:left樣式，強制清除左邊的浮動影響，如下程式碼。 

section {border:1px solid blue; margin:0 0 10px 0; float:left; width:100%;}
footer {border:1px solid red; clear:left;}

注意：浮動非圖片元素時，必須給它設定寬度，否則後果難以預料。

第三種：新增非浮動的清除元素

新增div元素

<body>
    <section class="clearfix"> 
        <img src="./碼農.gif" />
        <p>It's fun to float.</p>
        <div class="clear_me"></div>
    </section> 
    <footer> Here is the footer element that runs across the bottom of the page.</footer> 
</body>

樣式：

<style>
section {border:1px solid blue; margin:0 0 10px 0;}
p {margin 0;}
footer {border:1px solid red;}
img {float:left;}
.clear_me {clear:left;}
</style>

clearfix規則 

<section class="clearfix"> 
<img src="images/rubber_duck.jpg"> 
<p>It's fun to float.</p> 
</section>

樣式：

.clearfix:after { 
content:"."; 
display:block; 
height:0; 
visibility:hidden; 
clear:both; 
}

這個clearfix規則最早是由程式設計師Tony Aslett發明的，它只新增了一個清除的包含句點作為非浮動元素（必須得有內容，而句點是最小的內容）①。規則中的其他宣告是為了確保這個偽元素沒有高度，而且在頁面上不可見。 使用clear:both意味著section中新增的子元素會清除左、右浮動元素（位於左、右浮動元素下方）。這裡當然可以只用left，但both也適用於將來圖片float:right的情況。

① after會在元素內容後面而不是元素後面插入一個偽元素。

以上幾種方式，都能正確顯示如下，當然，不同方式，是有其具體適用或不適用場景的。
enter image description here

浮動是實現多欄佈局（在更多瀏覽器支援CSS3的Multi-column Layout Module之前）唯一最可靠的方式。

讀《CSS設計指南（第三版）》，收穫不少，推薦之~~~~~~！

相關文章