摘要：浮動(dòng)框旁邊的行框被縮短，從而給浮動(dòng)框留出空間，行框圍繞浮動(dòng)框。不浮動(dòng)的浮動(dòng)的三浮動(dòng)之于塊浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?/p>

?

一、前言

?

　　浮動(dòng)元素以脫離標(biāo)準(zhǔn)流的方式來實(shí)現(xiàn)元素的向左或向右浮動(dòng)，并且浮動(dòng)元素還是在原來的行上進(jìn)行浮動(dòng)的。float浮動(dòng)屬性的四個(gè)參數(shù)：left：元素向左浮動(dòng)；right：元素向右浮動(dòng)；none：默認(rèn)值，元素不浮動(dòng)；inherit：繼承父元素的float屬性值。

舉兩個(gè)栗子

父元素是否注意到自己有個(gè)浮動(dòng)的子div呢？

<div style="width: 400px; height: auto; border: 2px solid black;">
    <div style="width: 50px; height: 100px; background-color: green; float: right;">div>
    我才不知道有沒有浮動(dòng)框，我只顯示文字的高度
div>

從中我們可以發(fā)現(xiàn)，處于標(biāo)準(zhǔn)流中的父div并不知道浮動(dòng)元素的存在，而浮動(dòng)元素卻知道它父元素的邊界，它一直向右浮動(dòng)直到撞到了父框的右邊界為止。

?

<div style="width: 240px; height: auto; border: solid 1px black;">
    <div style="width: 80px; height: 80px; background-color: red;">
        框一
    div>
    <div style="width: 80px; height: 80px; background-color: green; float: right;">
        框二
    div>      
div>

?我們發(fā)現(xiàn)框二并沒有跑到框一這一行的右側(cè)去，而浮動(dòng)到了原來這行的的右側(cè)。

?

下面我們一起逐步學(xué)習(xí)CSS中的浮動(dòng)屬性float。

?

二、浮動(dòng)之于文本

?

CSS參考手冊(cè)上對(duì)float的說明：

　　float 屬性定義元素在哪個(gè)方向浮動(dòng)。以往這個(gè)屬性總應(yīng)用于圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動(dòng)。浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，而不論它本身是何種元素。

　　如果浮動(dòng)非替換元素，則要指定一個(gè)明確的寬度；否則，它們會(huì)盡可能地窄。

?

1.實(shí)現(xiàn)文本環(huán)繞圖像

　　浮動(dòng)框雖然脫離了標(biāo)準(zhǔn)流，但標(biāo)準(zhǔn)流中的文本依舊會(huì)做相應(yīng)的移動(dòng)，為浮動(dòng)框留出空間。浮動(dòng)框旁邊的行框被縮短，從而給浮動(dòng)框留出空間，行框圍繞浮動(dòng)框。

　　因此，創(chuàng)建浮動(dòng)框可以使文本圍繞圖像：

? ? ? ?

舉兩個(gè)小栗子

<div style="width: 350px; background-color: #33FFFF;">
    <img src="http://h5ip.cn/ge0w" style="width: 100px; height: 100px; float: right;">
    <span>
    路飛性格積極樂觀，愛憎分明，而且十分重視伙伴，不甘屈居于他人之下，對(duì)任何危險(xiǎn)的事物都超感興趣。和其他傳統(tǒng)的海賊所不同的是，他并不會(huì)為了追求財(cái)富而殺戮，而是享受著身為海賊的冒險(xiǎn)和自由
    span>        
div>

?

<span>雖然我先寫于浮動(dòng)元素，但還是被擠到了右邊。。。span>
<div style="width: 100px; height: 100px; background: blue;  float: left;">div>

2.任何元素浮動(dòng)后都將生成塊級(jí)框

?　　首先應(yīng)當(dāng)注意塊級(jí)框不等同于塊狀元素，塊級(jí)元素會(huì)獨(dú)占一行而塊級(jí)框卻不會(huì)，浮動(dòng)元素產(chǎn)生的效果類似于行內(nèi)塊元素。對(duì)行內(nèi)非替換元素設(shè)置width和height是無效的，但生成浮動(dòng)元素之后width和height將有效，并且不會(huì)多帶帶占一行，所以說它類似于行內(nèi)塊元素。

?

<span style="width: 100px; height: 50px; background-color: #6699FF;">
    不浮動(dòng)的span
span>
<span style="width: 100px; height: 50px; background-color: #33FFFF; float: left;">
    浮動(dòng)的span
span>

?

三、浮動(dòng)之于塊?

?

　　浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹?。由于浮?dòng)框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。

?

不浮動(dòng)的div為塊級(jí)元素，各自獨(dú)占一行

<div style="width: 240px; height: auto; border: solid 1px black;">
    <div style="width: 80px; height: 80px; background-color: red;">
        框一
    div>
    <div style="width: 80px; height: 80px; background-color: green;">
        框二
    div>
    <div style="width: 80px; height: 80px; background-color: blue;">
        框三
    div>        
div>

?

<div style="width: 240px; height: auto; border: solid 1px black;">
    <div style="width: 80px; height: 80px; background-color: red; float: right;">
        框一
    div>
    <div style="width: 80px; height: 80px; background-color: green;">
        框二
    div>
    <div style="width: 80px; height: 80px; background-color: blue;">
        框三
    div>        
div>

?

當(dāng)框 1 向左浮動(dòng)時(shí)，它脫離文檔流并且向左移動(dòng)，直到它的左邊緣碰到包含框的左邊緣。因?yàn)樗辉偬幱谖臋n流中，所以它不占據(jù)空間，實(shí)際上覆蓋住了框 2，使框 2 從視圖中消失。

<div style="width: 240px; height: auto; border: solid 1px black;">
    <div style="width: 80px; height: 80px; background-color: red; float: left;">
        框一
    div>
    <div style="width: 80px; height: 80px; background-color: green;">
        框二
    div>
    <div style="width: 80px; height: 80px; background-color: blue;">
        框三
    div>        
div>

?

如果把所有三個(gè)框都向左移動(dòng)，那么框 1 向左浮動(dòng)直到碰到包含框，另外兩個(gè)框向左浮動(dòng)直到碰到前一個(gè)浮動(dòng)框，這時(shí)父框的高度為0

<div style="width: 240px; height: auto; border: solid 1px black;">
    <div style="width: 80px; height: 80px; background-color: red; float: left;">
        框一
    div>
    <div style="width: 80px; height: 80px; background-color: green; float: left;">
        框二
    div>
    <div style="width: 80px; height: 80px; background-color: blue; float: left;">
        框三
    div>        
div>

?

?

?如果包含框太窄，無法容納水平排列的三個(gè)浮動(dòng)元素，那么其它浮動(dòng)塊向下移動(dòng)，直到有足夠的空間。

<div style="width: 200px; height: auto; border: solid 1px black;">
    <div style="width: 80px; height: 80px; background-color: red; float: left;">
        框一
    div>
    <div style="width: 80px; height: 80px; background-color: green; float: left;">
        框二
    div>
    <div style="width: 80px; height: 80px; background-color: blue; float: left;">
        框三
    div>        
div>

?

如果浮動(dòng)元素的高度不同，那么當(dāng)它們向下移動(dòng)時(shí)可能被其它浮動(dòng)元素“卡住”

<div style="width: 200px; height: auto; border: solid 1px black;">
    <div style="width: 80px; height: 100px; background-color: red; float: left;">
        框一
    div>
    <div style="width: 80px; height: 80px; background-color: green; float: left;">
        框二
    div>
    <div style="width: 80px; height: 80px; background-color: blue; float: left;">
        框三
    div>        
div>

?

四、浮動(dòng)的副作用及處理?

?

?　　通過上面的介紹可以總結(jié)出浮動(dòng)的兩個(gè)副作用：1.頁(yè)面塌陷，也就是子元素不能將父元素?fù)伍_；2.元素覆蓋，浮動(dòng)元素不在標(biāo)準(zhǔn)流中因此可能會(huì)覆蓋標(biāo)準(zhǔn)流中的元素。四種解決方案如下：

?

1.手動(dòng)給父元素添加高度

　　這種方法用來解決父元素的頁(yè)面塌陷問題，應(yīng)當(dāng)注意的是，為保證父框的高度等于最高浮動(dòng)元素的高度應(yīng)當(dāng)充分考慮浮動(dòng)元素的邊框以及內(nèi)外邊距。

?

<div style="width: 300px; height: 52px; border: solid 1px black;">
    <div style="width: 80px; height: 50px; background-color: red; float: left; border: solid 1px #FFF;">div>
    <div style="width: 80px; height: 50px; background-color: green; float: left; border: solid 1px #FFF;">div>
    <div style="width: 80px; height: 50px; background-color: blue; float: left; border: solid 1px #FFF;">div>        
div>

?

?

這種方式治標(biāo)不治本，當(dāng)浮動(dòng)子元素增加時(shí)，頁(yè)面塌陷問題重現(xiàn)

?

2.通過clear屬性清除內(nèi)部和外部浮動(dòng)

　　clear 屬性規(guī)定元素的哪一側(cè)不允許其他浮動(dòng)元素。clear屬性的四個(gè)參數(shù)：none（默認(rèn)值）、left、right、both；如果聲明為左邊或右邊清除，會(huì)使元素的上外邊框邊界剛好在該邊上浮動(dòng)元素的下外邊距邊界之下。

　　none：允許兩邊都可以有浮動(dòng)對(duì)象；left：不允許左邊有浮動(dòng)對(duì)象；right：不允許右邊有浮動(dòng)對(duì)象；both：不允許有浮動(dòng)對(duì)象。

?

添加clear屬性之前

<div style="width: 300px; height: auto; border: solid 1px black; clear: both;">
    <div style="width: 80px; height: 50px; background-color: red; float: left; border: solid 1px #FFF;">div>
    <div style="width: 80px; height: 50px; background-color: green; border: solid 1px #FFF; clear: left; ">div> 
div>

添加之后

?

添加clear前

<div style="width: 300px; height: auto; border: solid 1px black; clear: both;">
    <div style="width: 80px; height: 50px; background-color: red; float: left; border: solid 1px #FFF;">div>
    <div style="width: 80px; height: 50px; background-color: green; float: left; border: solid 1px #FFF;">div>
    <div style="width: 80px; height: 50px; background-color: blue; float: left; border: solid 1px #FFF;">div> 
    <div style="width: 80px; height: 50px; background-color: green; float: left; border: solid 1px #FFF;">div>
    <div style="width: 80px; height: 50px; background-color: blue; float: left; border: solid 1px #FFF;">div>   
    <div style=" clear: both;">div>   
div>

添加之后
　

?

3.給父元素添加overflow屬性并結(jié)合zoom:1使用

?

<div style="width: 300px; height: auto; border: solid 1px black; clear: both; overflow: hidden; zoom: 1;">
    <div style="width: 80px; height: 50px; background-color: red; float: left; border: solid 1px #FFF;">div>
    <div style="width: 80px; height: 50px; background-color: green; float: left; border: solid 1px #FFF;">div>
    <div style="width: 80px; height: 50px; background-color: blue; float: left; border: solid 1px #FFF;">div> 
    <div style="width: 80px; height: 50px; background-color: green; float: left; border: solid 1px #FFF;">div>
    <div style="width: 80px; height: 50px; background-color: blue; float: left; border: solid 1px #FFF;">div>  
div>

?

?overflow屬性是用來修剪溢出的元素，所以使用此種方案會(huì)使溢出元素被截掉

使用overflow前

<div style="width: 300px; height: auto; border: solid 1px black; clear: both; padding: 5px; overflow: hidden;">
    <div style="width: 500px; height: 50px; background-color: red; border: solid 1px #FFF;?float: left;">div> 
div>
使用后

?zoom是IE瀏覽器專用的屬性，通過子元素的高度來設(shè)置父元素的高度，添加該屬性用來兼容IE瀏覽器

?

4.給父元素添加浮動(dòng)

　　這是一種”以毒攻毒“的方法，因?yàn)楦冈馗?dòng)后雖然消除了浮動(dòng)子元素對(duì)其的影響，但父元素下面的元素就可能就會(huì)受該浮動(dòng)父元素的影響。?

<div style="width: 300px; height: auto; border: solid 1px black; clear: both; float: left;">
　　<div style="width: 100px; height: 50px; background-color: red; float: left;">div> 
div>
<div style="width: 200px; height: 100px; background-color: blue;">div>

?

這四種常用的清除浮動(dòng)解決辦法可以根據(jù)實(shí)際情況進(jìn)行使用，當(dāng)然還有一些也比較好的解決辦法，例如使用before偽類清除浮動(dòng)，等進(jìn)一步學(xué)習(xí)之后再補(bǔ)充。

?

?五、最后

?

　　感謝博主謙行的博客：CSS布局 ——從display，position， float屬性談起以及W3School提供的學(xué)習(xí)資料！所學(xué)不深，如有錯(cuò)誤或不足之處還望留言指出，十分感謝！

?