Float是一個好的的屬性,但是它也會困擾我們如果我們不知道它的工作原理的話.這篇文章主要介紹float的原理和基本用法.
 
簡單來說就是設置了浮動的元素會浮動到相應的左邊或者右邊,內容會跟著填充到浮動元素的對應地方.

浮動有四個屬性值:left|right|inherit|none,分別是左浮動,右浮動,繼承(來自父元素的浮動屬性值)和無.

來一個雜志效果的例子:

雜志效果浮動

圖片的樣式為:

img { 
    float: right;
    margin: 10px;
}
 

浮動的表現

HTML有一個規則:正常文檔流.在正常文檔流下,每個塊元素(div,p,h1...)都會換行.而浮動的元素在正常文檔流下是先布局的,然后脫離正常的文檔流顯示在它父元素的左邊或者右邊.所以浮動元素不再換行而是顯示在元素的旁邊.

看一個例子:沒有設置浮動的三個塊

塊元素的樣式:

.block { 
    width: 200px;
    height: 200px;
}
這三個塊是在正常文檔流下的顯示,每個元素在上個元素的正下方,現在我們把三個塊都設置左浮動:

.block { 
    float: left;
    width: 200px;
    height: 200px;
}
效果看這里:左浮動

浮動之后每個塊元素都跟在浮動元素的后面.如果父元素沒有足夠的寬度,那么浮動的元素將會自動換行顯示.看這個例子,然后試著縮小瀏覽器窗口,浮動的塊元素會自動換行.


清除浮動

浮動元素脫離了正常的文檔流,所以會對在浮動之后的文檔結構產生影響,因此我們在浮動元素過后,也要相應的清除浮動,讓文檔結構恢復到正常的文檔流.清除浮動的方法有很多中,先 基本的就是對應的clear屬性.

clear的屬性值:left|right|both|inherit|none,相應的浮動對應相應的清除浮動.下面我們來看一個浮動的例子,一共四個塊元素,前面兩個浮動,后面兩個不浮動,結構如下:

<div class="block pink float"></div>
<div class="block blue float"></div>
<div class="block green"></div>
<div class="block orange"></div>
復制代碼
.block {
    width: 200px;
    height: 200px;
}
.float { float: left; }
.pink { background: #ee3e64; }
.blue { background: #44accf; }
.green { background: #b7d84b; }
.orange { background: #E2A741; }
復制代碼
結果看這里

咦,綠色的塊去哪里了呢?然后看看源代碼,選中綠色塊的HTML,原來在粉紅色塊的正下方.兩個浮動元素的顯示正如我們期望的那樣,左浮動并在一排顯示,但是它們已經脫離了正常的文檔流,好像它們并不在那里一樣.所以個沒有浮動的元素就占領了它們的位置,被浮動元素遮蓋住.所以我們需要清除浮動,讓綠色的塊顯示.

代碼結構如下:

<div class="block pink float"></div>
<div class="block blue float"></div>
<div class="block green clear"></div>
<div class="block orange"></div>
復制代碼
.block {
    width: 200px;
    height: 200px;
}
.float { float: left; }
.clear { clear: left; }
.pink { background: #ee3e64; }
.blue { background: #44accf; }
.green { background: #b7d84b; }
.orange { background: #E2A741; }
復制代碼
通過clear:left這個css樣式,綠色的塊顯示了,正確的清除浮動能讓元素在浮動的基礎上也不影響正常的文檔流.清除浮動后的效果

 

利用浮動屬性進行布局

在用DIV布局的現在,DIV+float是我們大部分都喜歡用來實現分欄布局的一種方法.我們來看一個簡單的兩欄布局.

CSS如下:

復制代碼
#container {
    width: 960px;
    margin: 0 auto;
}
#content {
    float: left;
    width: 660px;
    background: #fff;
}
#navigation {
    float: right;
    width: 300px;
    background: #eee;
}
#footer {
    clear: both;
    background: #aaa;
    padding: 10px;
}
復制代碼
通過設置#content左浮動,#navigation右浮動,總寬度為#container來實現了兩欄布局.要注意的是,#footer一定要清除浮動,因為同時存在左浮動和右浮動,所以使用clear:both來清楚兩邊的浮動.

來看一下如果沒有對#footer進行清除浮動的結果.戳這里

 

浮動優先

浮動元素在HTML中放置在不同的位置也會產生不用的顯示結果.我們來看一個例子.戳這里

例子中圖片向右浮動并且在HTML結構中在未浮動元素P之前.代碼結構如下:

<div id="container">
    <img src="image.gif" />
    <p>深圳網站建設-獨占網絡</p>
</div>
復制代碼
#container {
    width: 280px;
    margin: 0 auto;
    padding: 10px;
    background: #aaa;
    border: 1px solid #999;
}
img {
    float: right;
}
復制代碼
現在我們改變HTML的結構,把浮動元素IMG放在P元素的后面.

<div id="container">
    <p>深圳網站建設-獨占網絡</p>
    <img src="image.gif" />
</div>
具體效果戳這里

圖片這時已經沒有包含在#container里,因為浮動優先原則里,之前的例子都是浮動元素在未浮動元素之前,所以得到的結果都是在我們的預期之內,而現在我們沒有按照這個規則寫我們的HTML結構,所以圖片溢出在了包含它的父元素之外,這是由于collapsing.

當一個父元素包含了一些浮動元素,而這些浮動元素并沒有向它應該的方式圍繞在未浮動元素周圍時collapsing就出現了.正如上面的例子中,浮動元素IMG就像并不在#container中一樣.

一個常見去修復這個問題的方式就是在我們的浮動元素后面添加一個有清除浮動屬性的元素,跟我們之前清除浮動的方式很像,只是新增了一個額外的元素,代碼看下面:

復制代碼
<div id="container">
    <p>深圳網站建設-獨占網絡</p>
    <img src="image.gif" />
    <div style="clear: right;"></div>
</div>
復制代碼
但是新增了一行額外的代碼并不是一個很好的方法,下面我們有幾個其他的方法.

現在有一個HMTL,一個父元素有三個浮動的圖片,代碼結構如下:

<div id="container">
    <img src="image.gif" />
    <img src="image.gif" />
    <img src="image.gif" />
</div>
復制代碼
#container {
    width: 260px;
    margin: 0 auto;
    padding: 10px 0 10px 10px;
    background: #aaa;
    border: 1px solid #999;
}
img {
    float: left;
    margin: 0 5px 0 0;
}
復制代碼
我們可以很快的意識到父元素并沒有包含浮動的圖片,因為浮動元素并不在文檔流中,所以對于父元素來說它是空的,結果看這里

現在我們用CSS來修復這個問題而不是添加額外的HTML標記.有一個方法能讓父元素自己清除它包含的浮動元素的浮動-overflow:hidden.要注意的是overflow屬性并不是為清除浮動而設計的,它可以隱藏內容和滾動條.現在我們在#container上使用這個屬性.

復制代碼
#container {
    overflow: hidden;
    width: 260px;
    margin: 0 auto;
    padding: 10px 0 10px 10px;
    background: #aaa;
    border: 1px solid #999;
}
復制代碼
顯示結果戳這里

還有清除浮動的方法就是使用偽類選擇器:

復制代碼
#container:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}