CSS-浮動篇float

Float是一個強大的屬性,可是它也會困擾咱們若是咱們不知道它的工做原理的話.這篇文章主要介紹float的原理和基本用法.

咱們能夠看到float在印刷世界的應用-雜誌.不少雜誌文章都是左邊一個圖片,右邊的文本浮動環繞着左邊的圖片.在HTML/CSS的世界中,有浮動樣式的圖片,文字將會包裹在它的周圍,就像雜誌的佈局同樣.圖片只是浮動屬性衆多應用中的一個,咱們也能夠經過浮動來實現兩欄(多欄)佈局.實際上,咱們能夠在任意的HTML元素上使用浮動(塊元素).

浮動的定義

來自W3C的定義:

A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or 「floated」 or 「floating」 box) is that content may flow along its side (or be prohibited from doing so by the 「clear」 property). Content flows down the right side of a left-floated box and down the left side of a right-floated box.

簡單來講就是設置了浮動的元素會浮動到相應的左邊或者右邊,內容會跟着填充到浮動元素的對應地方.

浮動有四個屬性值: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>This is some text contained within a small-ish box. I'm using it as an example of how placing your floated elements in different orders in your HTML can affect your layouts. For example, take a look at this great photo placeholder that should be sitting on the right.</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>This is some text contained within a small-ish box. I'm using it as an example of how placing your floated elements in different orders in your HTML can affect your layouts. For example, take a look at this great photo placeholder that should be sitting on the right.</p>
    <img src="image.gif" />
</div>

具體效果戳這裏

圖片這時已經沒有包含在#container裏,由於浮動優先原則裏,以前的例子都是浮動元素在未浮動元素以前,因此獲得的結果都是在咱們的預期以內,而如今咱們沒有按照這個規則寫咱們的HTML結構,因此圖片溢出在了包含它的父元素以外,這是因爲collapsing.

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

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

<div id="container">
    <p>This is some text contained within a small-ish box. I'm using it as an example of how placing your floated elements in different orders in your HTML can affect your layouts. For example, take a look at this great photo placeholder that should be sitting on the right.</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;
}

總結:

浮動可讓你的佈局變得隨意和響應式,同時清除浮動的方式也有不少種,選擇你最習慣和喜歡的方式,讓佈局變得更加優美.