詳解CSS float屬性

時間 2019-11-22

標籤詳解 css float 屬性欄目 CSS 简体版

原文原文鏈接

CSS中的float屬性是一個頻繁用到的屬性，對於初學者來講，若是沒有理解好浮動的意義和表現出來的特性，在使用的使用很容易陷入困惑，雲裏霧裏，搞不清楚狀態。本文將從最基本的知識開始提及，談談關於浮動的應用，出現的問題和解決方案。瀏覽器

基礎知識

float，顧名思義就是浮動，設置了float屬性的元素會根據屬性值向左或向右浮動，咱們稱設置了float屬性的元素爲浮動元素。
浮動元素會從普通文檔流中脫離，但浮動元素影響的不只是本身，它會影響周圍的元素對齊進行環繞。舉例說明以下：
Html代碼：ide

1 <div class="box">
2         <span class="float-ele">
3             浮動元素
4         </span>
5         普通文檔流普通文檔流普通文檔流普通文檔流普通文檔流普通文檔流普通文檔流普通文檔流普通文檔流普通文檔流普通文檔流普通文檔流普通文檔流普通文檔流普通文檔流
6 </div>

CSS代碼：佈局

1 .box { background: #00ff90; padding: 10px; width: 500px; }
2 .float-ele { float: left; margin: 10px; padding: 10px; background: #ff6a00; width: 100px; text-align: center; }

效果圖學習

float基本效果

由效果圖能夠看出，span元素周圍的文字會圍繞着span元素，而設置了float屬性的span元素變成了一個塊級元素的感受，能夠設置width和height屬性。這是設置了float屬性後的效果，關於float的詳細細節，咱們接下來詳細講解。url

float的詳細細節

在說明float帶來的詳細細節以前，咱們首先要了解一個概念。
包含塊：浮動元素的包含塊就是離浮動元素最近的塊級祖先元素，前面敘述的例子中，div.box就是span元素的包含塊。spa

瞭解完包含塊的概念以後，首先要說明的浮動元素的第一個特性：無論一個元素是行內元素仍是塊級元素，若是被設置了浮動，那浮動元素會生成一個塊級框，能夠設置它的width和height，所以float經常用於製做橫向配列的菜單，能夠設置大小而且橫向排列。code

浮動元素的展現在不一樣狀況下會有不一樣的規則，下面咱們來一一說明這些規則。
1.浮動元素在浮動的時候，其margin不會超過包含塊的padding
這一點很簡單，浮動元素的浮動位置不能超過包含塊的內邊界
HTML代碼blog

<div class="box">
　　<span class="rule1">
   　　浮動元素
　　</span>
</div>

CSS代碼排序

1 .box { background: #00ff90; padding: 10px; width: 500px; height: 400px; }
2         .rule1 { float: left; margin: 10px; padding: 10px; background: #ff6a00; width: 100px; text-align: center; }

效果圖遊戲

float規則一

這個例子中，box的padding是10px，浮動元素的margin是10px，合起來爲20px，即浮動元素不會超過包含塊的padding。
PS：若是想要元素超出，能夠設置margin屬性

2.若是有多個浮動元素，後面的浮動元素的margin不會超過前面浮動元素的margin
簡單說就是若是有多個浮動元素，浮動元素會按順序排下來而不會發生重疊的現象。
修改前面例子中的HTML代碼以下：

 1 <div class="box">
 2         <span class="rule1">
 3             浮動元素1
 4         </span>
 5         <span class="rule1">
 6             浮動元素2
 7         </span>
 8         <span class="rule1">
 9             浮動元素3
10         </span>
11     </div>

效果圖以下：

float規則二

如圖所示，浮動元素會一個一個排序下來而不會發生重疊現象。

3.若是兩個元素一個向左浮動，一個向右浮動，左浮動元素的marginRight不會和右浮動元素的marginLeft相鄰。
什麼意思呢，咱們要分兩種狀況來看。
（1）包含塊的寬度大於兩個浮動元素的寬度總和，舉例以下：
HTML代碼：

1 <div class="box">
2     <span class="rule1">
3         浮動元素1
4     </span>
5     <span class="rule2">
6         浮動元素2
7     </span>
8 </div>

CSS代碼

1 .box { background: #00ff90; padding: 10px; width: 500px; height: 400px; }
2 .rule1 { float: left; margin: 10px; padding: 10px; background: #ff6a00; width: 100px; text-align: center; }
3 .rule2 { float: right; margin: 10px; padding: 10px; background: #ff6a00; width: 100px; text-align: center; }

效果圖

float規則三狀況1

這種狀況很簡單：包含塊元素的寬度足夠大，兩個元素一個向左浮動，一個向右浮動，井水不犯河水。

（2）包含塊的寬度小於兩個浮動元素的寬度總和
修改浮動元素的寬度爲300px，CSS代碼以下：

.rule1 { float: left; margin: 10px; padding: 10px; background: #ff6a00; width: 300px; text-align: center; }
.rule2 { float: right; margin: 10px; padding: 10px; background: #ff6a00; width: 300px; text-align: center; }

效果圖

float規則三狀況2

若是所示，若是包含塊寬度不夠高，後面的浮動元素將會向下浮動，其頂端是前面浮動元素的底端。

4.浮動元素頂端不會超過包含塊的內邊界底端，若是有多個浮動元素，下一個浮動元素的頂端不會超過上一個浮動元素的底端
這條規則簡單說就是若是有多個浮動元素，後面的元素高度不會超過前面的元素，而且不會超過包含塊。舉例以下：
HTML代碼：

 1 <div class="box">
 2         <p>在浮動元素以前在浮動元素以前，在浮動元素以前，在浮動元素以前，在浮動元素以前，在浮動元素以前，在浮動元素以前，在浮動元素以前，</p>
 3         <p class="rule1">
 4             浮動元素1浮動元素1浮動元素1浮動元素1浮動元素1浮動元素1浮動元素1浮動元素1浮動元素1浮動元素1浮動元素1浮動元素1
 5         </p>
 6         <p>在浮動元素以後在浮動元素以後在浮動元素以後在浮動元素以後在浮動元素以後在浮動元素以後在浮動元素以後在浮動元素以後</p>
 7         <p class="rule1">
 8             浮動元素2浮動元素2浮動元素2浮動元素2浮動元素2浮動元素2浮動元素2浮動元素2浮動元素2浮動元素2浮動元素2浮動元素2浮動元素2
 9         </p>
10     </div>

CSS代碼

1 .box { background: #00ff90; padding: 10px; width: 500px; height: 400px; }
2 .rule1 { float: left; margin: 10px; padding: 10px; background: #ff6a00; width: 250px; text-align: center; }
3 p { margin-top: 20px; margin-bottom: 20px; }

效果圖

float規則四

如圖所示，兩個浮動元素，後面的浮動元素不會超過前面的浮動元素

5.若是有非浮動元素和浮動元素同時存在，而且非浮動元素在前，則浮動元素不會不會高於非浮動元素
這條規則也是顯而易見的，在第4條規則中的例子，浮動元素有一個非浮動元素p，而浮動元素沒有超過它。

6.浮動元素會盡量地向頂端對齊、向左或向右對齊
在知足其餘規則下，浮動元素會盡可能向頂端對齊、向左或向右對齊，在第4條規則中的例子，浮動元素會盡量靠近不浮動的p元素，左側對齊

float規則六

float特殊狀況

前面討論了float須要遵照的一些規則，這些規則都是在比較常見的場景下展現的結果。下面咱們來討論一些不常見的狀況。

浮動元素的延伸性

在說浮動元素的延伸性以前，咱們首先來考慮一個比較特殊的例子。
咱們將span元素放在p元素內，並將其高度設置成高於p元素而且左浮動，這個例子的關鍵在浮動元素高度高於父元素。
HTML代碼

1 <p>
2         在浮動元素以前在浮動元素以前，在浮動元素以前，在浮動元素以前，在浮動元素以前，在浮動元素以前，在浮動元素以前，在浮動元素以前，
3         <span class="high-float">
4             浮動元素比父級元素高
5         </span>
6     </p>
7     <p>在浮動元素以後在浮動元素以後在浮動元素以後在浮動元素以後在浮動元素以後在浮動元素以後在浮動元素以後在浮動元素以後</p>

CSS代碼

1 p { margin-top: 20px; margin-bottom: 20px; background-color: #00ff21; width: 500px; }
2 .high-float { float: left; height: 80px; line-height: 80px; background-color: orangered; }

效果圖

浮動元素高度大於父級元素

在這個例子中，浮動元素高度高於父元素，能夠看到浮動元素超出了父元素的底端。
這種狀況要怎麼解決呢，只要將父元素也設置成浮動便可，咱們將第一個p元素設置成左浮動，效果以下

浮動元素延伸性

將父元素p設置成float:left後，浮動元素就會被包含到父元素裏面，咱們將這個特性成爲浮動元素的延伸性。
浮動元素的延伸性是什麼呢，咱們能夠將其理解爲元素被設置成浮動後，該元素會進行延伸進而包含其全部浮動的子元素

浮動元素超出父級元素的padding

在前面提到的第一條規則：浮動元素的外邊界不會超過父級元素的內邊界。大部分狀況下，咱們見到的場景都是符合的。可是有一些特殊狀況。
（1）負margin
咱們將浮動元素的margin-left設置成負數。
HTML代碼：

1 <p>
2     在浮動元素以前在浮動元素以前，在浮動元素以前，在浮動元素以前，在浮動元素以前，在浮動元素以前，在浮動元素以前，在浮動元素以前，
3     <span class="minus-margin">
4         負margin-left
5     </span>
6 </p>

CSS代碼：

1 p { margin-top: 20px; margin-bottom: 20px; margin-left: 50px; background-color: #00ff21; width: 500px; }
2 .minus-margin { float: left; height: 80px; line-height: 80px; background-color: orangered; margin-left: -20px; }

效果圖

負maring的浮動元素

將margin-left設置成負數以後，浮動的子元素明顯超出了父元素的內邊界，這難道不是違反了第一條規則嗎？
但仔細想一想，這實際上是合理的，由於默認狀況下marign-left就是0，因此不會超出父元素的內邊界，可是將其設置成負數以後，就至關於浮動元素覆蓋了本身的內邊界同樣。
咱們在從數學的角度來看看這個問題，這個例子中：
父元素的margin-left:50px，padding和border默認爲0，即內邊界所在距離瀏覽器左側的位置爲50px。
浮動的子元素默認狀況下距離瀏覽器左側的像素應該爲50px，可是將其設置成margin-left:20px後，瀏覽器會進行計算：
50px+（-20px）margin+0border+0padding=30px。距離瀏覽器左側更近，因此超出了父元素。

（2）浮動元素寬度大於父級元素寬度
若是咱們將浮動元素的寬度設置大於父級元素，效果會如何呢？
元素左浮動，width大於父級元素
HTML代碼

1 <p>
2     在浮動元素以前在浮動元素以前，在浮動元素以前，在浮動元素以前，在浮動元素以前，在浮動元素以前，在浮動元素以前，在浮動元素以前，
3     <span class="big-width">
4         width大於父級元素
5     </span>
6 </p>

CSS代碼

1 p { margin-top: 20px; margin-bottom: 20px; margin-left: 50px; background-color: #00ff21; width: 250px; }
2 .big-width { float: left; height: 80px; line-height: 80px; background-color: orangered; width: 300px; }

效果圖

大width的浮動元素

將浮動元素左浮動，而且寬度超出父級元素時，因爲浮動元素寬度較大，它會超過父級元素的右內邊界
若是將其設置成右浮動，狀況又會怎麼樣呢？

大width的浮動元素

能夠看到，設置成右浮動後，會超出父級元素的左內邊界。

重疊問題

重疊問題是指兩個元素再同一個位置，會出現上下重疊的問題。浮動元素若是和普通文檔流發生重疊會怎麼樣呢？
首先浮動元素要怎麼樣纔會發生重疊呢，設置其margin-top爲負數便可。咱們看看例子：
HTML代碼：

1 <p>
2         <span>
3             在浮動元素以前在浮動元素以前，在浮動元素以前，在浮動元素以前，在浮動元素以前，在浮動元素以前，在浮動元素以前，在浮動元素以前。
4         </span>
5         <span class="overlay">
6             浮動元素重疊
7         </span>
8     </p>

CSS代碼

1 p { margin-top: 20px; margin-bottom: 20px; margin-left: 50px; background-color: #00ff21; width: 250px; }
2 .overlay { float: left; height: 80px; line-height: 80px; background-color: orangered; width: 300px; margin-top: -30px; }

效果圖以下：

浮動元素的重疊問題

若是浮動元素不設置負margin時，是這樣的

浮動元素的重疊問題

在這個例子中，能夠看到p中正常流元素span的內容會顯示在浮動元素上面。
咱們給設置span設置背景圖片試試，效果以下：

浮動元素的重疊問題：有背景圖

元素設置背景後，重疊的部分仍是會顯示背景

若是是span標籤換成div標籤會怎麼樣呢？
HTML代碼：

1 <p>
2      <div style="background-image:url(../images/banner1.jpg)">
3          在浮動元素以前在浮動元素以前，在浮動元素以前，在浮動元素以前，在浮動元素以前，在浮動元素以前，在浮動元素以前，在浮動元素以前。
4      </div>
5      <span class="overlay">
6          浮動元素重疊
7      </span>
8  </p>

效果圖

浮動元素的重疊問題：塊級元素有背景圖

這種狀況下，重疊的部分不會顯示背景圖片。

總結一下這兩種狀況的區別：
一、行內元素與浮動元素髮生重疊，其邊框，背景和內容都會顯示在浮動元素之上
二、塊級元素與浮動元素髮生重疊時，邊框和背景會顯示在浮動元素之下，內容會顯示在浮動元素之上

clear屬性

有的時候，咱們不但願一些元素會被旁邊的浮動元素影響到，這個時候就須要用到clear屬性了。
clear屬性：確保當前元素的左右兩側不會有浮動元素。
咱們舉個例子進行說明：
假設有3個浮動的div以下所示：

3個浮動元素

它的HTML代碼和CSS代碼以下
HTML代碼：

1 <div class="box">
2         <div class="float">浮動元素1</div>
3         <div class="float">浮動元素2</div>
4         <div class="float">浮動元素3</div>
5     </div>

CSS代碼：

1  .float { float: left; width: 150px; background: #0094ff; border: 1px solid red; margin-left: 5px; }
2 .cl { clear: left; }
3 .cr { clear: right; }
4 .cb { clear: both; }

假設有咱們有想讓第二個浮動元素另起一行進行浮動，那該怎麼作呢？

根據clear屬性的定義：確保當前元素的左右兩側不會有浮動元素。
咱們對第一個浮動元素添加clear:right保證其右側不會有浮動元素。修改HTML代碼以下：

1 <div class="box">
2     <div class="float cr">浮動元素1</div>
3     <div class="float">浮動元素2</div>
4     <div class="float">浮動元素3</div>
5 </div>

查看效果發現沒有什麼變化

第1個元素清除浮動

這種方法是錯誤的！！

那咱們試試給第二個元素添加clear:left保證其左側不會出現浮動元素。修改HTML代碼以下：

1 <div class="box">
2     <div class="float">浮動元素1</div>
3     <div class="float cl">浮動元素2</div>
4     <div class="float">浮動元素3</div>
5 </div>

第2個元素清除浮動

能夠看到此次clear屬性有效果了。

一樣是設置clear屬性，爲何會出現這樣的結果呢？
使用clear屬性的時候要記住：clear只對元素自己的佈局起做用。
在前面的例子中，第一個浮動元素添加了clear屬性，它並不會影響到其餘元素的佈局，只會影響本身，因此第二個浮動元素並不會另起一行。
而第二個浮動元素設置了clear後，咱們能夠看到clear做用於本身，因此元素另起一行。

清除浮動

清除浮動是一個常常提到的東西，首先咱們要理解使用浮動會帶來什麼問題，以及爲何要清除浮動。
咱們知道，一個塊級元素若是沒有設置height，其height是由子元素撐開的。對子元素使用了浮動以後，子元素會脫離標準文檔流，也就是說，父級元素中沒有內容能夠撐開其高度，這樣父級元素的height就會被忽略，這就是所謂的高度塌陷。要解決這樣的問題，咱們就是要使用清除浮動。
清除浮動有不少方法，下面咱們一一說明每一種方法。

對於IE瀏覽器來講，要清除浮動帶來的問題，只須要觸發器hasLayout就能夠，直接設置樣式zoom:1就能夠觸發。關於hasLayout的知識，這裏暫不詳述，之後咱們專門來說講這個東西，感興趣的同窗能夠先查查相關資料。

對於非IE瀏覽器，主要有下面幾種方法：

增長額外的div

這是最簡單直接的方法，哪裏有浮動元素，就在其父級元素的內容中增長一個（做爲最後一個子元素）

1 <div style="clear:both"></div>

這樣就會清除浮動元素帶來的問題。

優勢：簡單直接，初學者經常使用的方法，也易於理解
缺點：增長額外的無心義標籤，不利於語義化，每次清除都要添加額外的空標籤，形成浪費

父級元素添加overflow:hidden

這個方法的關鍵在於觸發了BFC，BFC是CSS中的難點之一，咱們之後專門來學習這個概念。如今只須要知道它能夠清除浮動帶來的影響。

1 .clearfix{overflow:hidden;zoom:1}

優勢：代碼量少，沒有額外的標籤

缺點：若是子元素超出父元素的範圍，會形成超出的部分被隱藏

after僞元素

after表示子元素的後面，經過它能夠設置一個具備clear的元素，而後將其隱藏

1 clearfix:{
2     zoom:1
3 }
4 clearfix:after{
5     display:block; content:''; clear:both; height:0; visibility:hidden;
6 }

這種方法的原理和第一個方法同樣，就是生成一個元素來清除浮動，只是這個元素是「假的」。

優勢：沒有額外標籤，綜合起來算是比較好的方法
缺點：稍顯複雜，可是理解其原理後也挺簡單的
推薦使用這種方法。

float的應用

說了這麼多float的原理和可能形成的問題，接下來咱們就要談談float的應用。

文字環繞效果

float最初的應用就是文字環繞效果，這對圖文並茂的文章頗有用。咱們簡單的距離說明一下：
HTML代碼

1 <div class="box">
2         <img src="1.jpg" class="float" />
3         我是環繞的文字我是環繞的文字我是環繞的文字我是環繞的文字我是環繞的文字我是環繞的文字我是環繞的文字我是環繞的文字我是環繞的文字我是環繞的文字我是環繞的文字我是環繞的文字我是環繞的文字我是環繞的文字我是環繞的文字
4     </div>

CSS代碼：

1 .box { background: #00ff90; padding: 10px; width: 500px; }  
2 .float {background: #0094ff none repeat scroll 0 0;border: 1px solid red;float: left;margin-left: 5px;width: 400px;}

效果圖

文字環繞效果

這樣很輕鬆的實現了文字環繞效果。

橫向菜單排列

在以前提到的display:inline的文章詳解CSS display:inline-block的應用中，咱們提到了橫向排列菜單的實現，最先是利用float屬性來實現的，它能夠很簡單的實現橫向菜單的效果。
HTML代碼：

1 <ul class="menu clearfix">
2     <li>首頁</li>
3     <li>政治</li>
4     <li>娛樂</li>
5     <li>體育</li>
6     <li>遊戲</li>
7 </ul>

CSS代碼：

1 .clearfix: { zoom: 1; }
2     .clearfix:after { display: block; content: ''; clear: both; height: 0; visibility: hidden; }
3 .menu { background: #0094ff; width: 500px; }
4     .menu li { float: left; width: 100px; list-style-type: none; }

效果圖：

橫向菜單

這種方式能夠很輕鬆的實現橫向菜單效果，但須要注意的是要注意清除浮動，推薦使用display:inline-block來實現

佈局

float最常用的場景就是佈局。使用float能夠很簡單的實現佈局，並且易於理解。下面咱們來實現一個三欄兩列的固定佈局。
HTML代碼：

 1 <div class="header">
 2     我是頭部
 3 </div>
 4 <div class="content clearfix">
 5     <div class="side">左側</div>
 6     <div class="main">
 7         右側
 8     </div>
 9 </div>
10 <div class="footer">
11     我是底部
12 </div>

CSS代碼

1 .clearfix: { zoom: 1; }
2     .clearfix:after { display: block; content: ''; clear: both; height: 0; visibility: hidden; }
3 .header, .footer { height: 50px; background: #0094ff; text-align: center; }
4 .content { margin: 0 auto; width: 1000px; background: #000000; }
5 .side { float: left; height: 500px; width: 280px; background: #ff006e; }
6 .main { float: right; height: 500px; width: 700px; background: #fbcfcf; }