Float是一個好的的屬性,但是它也會困擾我們?nèi)绻覀儾恢浪墓ぷ髟淼脑?這篇文章主要介紹float的原理和基本用法.
 
簡單來說就是設(shè)置了浮動的元素會浮動到相應(yīng)的左邊或者右邊,內(nèi)容會跟著填充到浮動元素的對應(yīng)地方.

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

來一個雜志效果的例子:

雜志效果浮動

圖片的樣式為:

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

浮動的表現(xiàn)

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

看一個例子:沒有設(shè)置浮動的三個塊

塊元素的樣式:

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

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

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


清除浮動

浮動元素脫離了正常的文檔流,所以會對在浮動之后的文檔結(jié)構(gòu)產(chǎn)生影響,因此我們在浮動元素過后,也要相應(yīng)的清除浮動,讓文檔結(jié)構(gòu)恢復(fù)到正常的文檔流.清除浮動的方法有很多中,先 基本的就是對應(yīng)的clear屬性.

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

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

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

代碼結(jié)構(gòu)如下:

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

 

利用浮動屬性進(jìn)行布局

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

CSS如下:

復(fù)制代碼
#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;
}
復(fù)制代碼
通過設(shè)置#content左浮動,#navigation右浮動,總寬度為#container來實(shí)現(xiàn)了兩欄布局.要注意的是,#footer一定要清除浮動,因為同時存在左浮動和右浮動,所以使用clear:both來清楚兩邊的浮動.

來看一下如果沒有對#footer進(jìn)行清除浮動的結(jié)果.戳這里

 

浮動優(yōu)先

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

例子中圖片向右浮動并且在HTML結(jié)構(gòu)中在未浮動元素P之前.代碼結(jié)構(gòu)如下:

<div id="container">
    <img src="image.gif" />
    <p>深圳網(wǎng)站建設(shè)-獨(dú)占網(wǎng)絡(luò)</p>
</div>
復(fù)制代碼
#container {
    width: 280px;
    margin: 0 auto;
    padding: 10px;
    background: #aaa;
    border: 1px solid #999;
}
img {
    float: right;
}
復(fù)制代碼
現(xiàn)在我們改變HTML的結(jié)構(gòu),把浮動元素IMG放在P元素的后面.

<div id="container">
    <p>深圳網(wǎng)站建設(shè)-獨(dú)占網(wǎng)絡(luò)</p>
    <img src="image.gif" />
</div>
具體效果戳這里

圖片這時已經(jīng)沒有包含在#container里,因為浮動優(yōu)先原則里,之前的例子都是浮動元素在未浮動元素之前,所以得到的結(jié)果都是在我們的預(yù)期之內(nèi),而現(xiàn)在我們沒有按照這個規(guī)則寫我們的HTML結(jié)構(gòu),所以圖片溢出在了包含它的父元素之外,這是由于collapsing.

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

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

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

現(xiàn)在有一個HMTL,一個父元素有三個浮動的圖片,代碼結(jié)構(gòu)如下:

<div id="container">
    <img src="image.gif" />
    <img src="image.gif" />
    <img src="image.gif" />
</div>
復(fù)制代碼
#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;
}
復(fù)制代碼
我們可以很快的意識到父元素并沒有包含浮動的圖片,因為浮動元素并不在文檔流中,所以對于父元素來說它是空的,結(jié)果看這里

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

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

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

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