么是 CSS Float（浮動(dòng)）？

CSS 的 Float（浮動(dòng)），會(huì)使元素向左或向右移動(dòng)，其周圍的元素也會(huì)重新排列。

Float（浮動(dòng)），往往是用于圖像，但它在布局時(shí)一樣非常有用。

元素怎樣浮動(dòng)

元素的水平方向浮動(dòng)，意味著元素只能左右移動(dòng)而不能上下移動(dòng)。

一個(gè)浮動(dòng)元素會(huì)盡量向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?/p>

浮動(dòng)元素之后的元素將圍繞它。

浮動(dòng)元素之前的元素將不會(huì)受到影響。

如果圖像是右浮動(dòng)，下面的文本流將環(huán)繞在它左邊：

實(shí)例

img

{

float:right;

}

彼此相鄰的浮動(dòng)元素

如果你把幾個(gè)浮動(dòng)的元素放到一起，如果有空間的話，它們將彼此相鄰。

在這里，我們對(duì)圖片廊使用 float 屬性：

實(shí)例

.thumbnail

{

float:left;

width:110px;

height:90px;

margin:5px;

}

清除浮動(dòng) - 使用 clear

元素浮動(dòng)之后，周圍的元素會(huì)重新排列，為了避免這種情況，使用 clear 屬性。

clear 屬性指定元素兩側(cè)不能出現(xiàn)浮動(dòng)元素。

使用 clear 屬性往文本中添加圖片廊：

實(shí)例

.text_line

{

clear:both;

}

嘗試一下 ?

更多實(shí)例

為圖像添加邊框和邊距并浮動(dòng)到段落的左側(cè)

讓我們?yōu)閳D像添加邊框和邊距并浮動(dòng)到段落的左側(cè)

標(biāo)題和圖片向右側(cè)浮動(dòng)

讓標(biāo)題和圖片向右側(cè)浮動(dòng)。

讓段落的第一個(gè)字母浮動(dòng)到左側(cè)

改變樣式，讓段落的第一個(gè)字母浮動(dòng)到左側(cè)。

創(chuàng)建一個(gè)沒有表格的網(wǎng)頁

使用 float 創(chuàng)建一個(gè)網(wǎng)頁頁眉、頁腳、左邊的內(nèi)容和主要內(nèi)容。

CSS 中所有的浮動(dòng)屬性

"CSS" 列中的數(shù)字表示不同的 CSS 版本（CSS1 或 CSS2）定義了該屬性。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

通流(normal flow)

這個(gè)單詞很多人翻譯為 文檔流 ， 字面翻譯 普通流 或者標(biāo)準(zhǔn)流都可以。

前面我們說過，網(wǎng)頁布局的核心，就是用CSS來擺放盒子位置。如何把盒子擺放到合適的位置？

CSS的定位機(jī)制有3種：普通流（標(biāo)準(zhǔn)流）、浮動(dòng)和定位。

html語言當(dāng)中另外一個(gè)相當(dāng)重要的概念----------標(biāo)準(zhǔn)流！或者普通流。普通流實(shí)際上就是一個(gè)網(wǎng)頁內(nèi)標(biāo)簽元素正常從上到下，從左到右排列順序的意思，比如塊級(jí)元素會(huì)獨(dú)占一行，行內(nèi)元素會(huì)按順序依次前后排列；按照這種大前提的布局排列之下絕對(duì)不會(huì)出現(xiàn)例外的情況叫做普通流布局。

浮動(dòng)(float)

浮動(dòng)最早是用來控制圖片，以便達(dá)到其他元素（特別是文字）實(shí)現(xiàn)“環(huán)繞”圖片的效果。

后來，我們發(fā)現(xiàn)浮動(dòng)有個(gè)很有意思的事情：就是讓任何盒子可以一行排列,因此我們就慢慢的偏離主題，用浮動(dòng)的特性來布局了。（CSS3已經(jīng)我們真正意義上的網(wǎng)頁布局）

什么是浮動(dòng)？

元素的浮動(dòng)是指設(shè)置了浮動(dòng)屬性的元素會(huì)脫離標(biāo)準(zhǔn)普通流的控制，移動(dòng)到其父元素中指定位置的過程。

在CSS中，通過float屬性來定義浮動(dòng)，其基本語法格式如下：

選擇器{float:屬性值;}

浮動(dòng)詳細(xì)內(nèi)幕特性

浮動(dòng)脫離標(biāo)準(zhǔn)流，不占位置，會(huì)影響標(biāo)準(zhǔn)流。浮動(dòng)只有左右浮動(dòng)。

浮動(dòng)首先創(chuàng)建包含塊的概念（包裹）。就是說， 浮動(dòng)的元素總是找理它最近的父級(jí)元素對(duì)齊。但是不會(huì)超出內(nèi)邊距的范圍。 

浮動(dòng)的元素排列位置，跟上一個(gè)元素（塊級(jí)）有關(guān)系。如果上一個(gè)元素有浮動(dòng)，則A元素頂部會(huì)和上一個(gè)元素的頂部對(duì)齊；如果上一個(gè)元素是標(biāo)準(zhǔn)流，則A元素的頂部會(huì)和上一個(gè)元素的底部對(duì)齊。

由2可以推斷出，一個(gè)父盒子里面的子盒子，如果其中一個(gè)子級(jí)有浮動(dòng)的，則其他子級(jí)都需要浮動(dòng)。這樣才能一行對(duì)齊顯示。

元素添加浮動(dòng)后，元素會(huì)具有行內(nèi)塊元素的特性。元素的大小完全取決于定義的大小或者默認(rèn)的內(nèi)容多少浮動(dòng)根據(jù)元素書寫的位置來顯示相應(yīng)的浮動(dòng)。

總結(jié)： 浮動(dòng) --->

浮動(dòng)的目的就是為了讓多個(gè)塊級(jí)元素同一行上顯示。

float 浮 漏 特

浮： 加了浮動(dòng)的元素盒子是浮起來的，漂浮在其他的標(biāo)準(zhǔn)流盒子上面。

漏： 加了浮動(dòng)的盒子，不占位置的，它浮起來了，它原來的位置漏 給了標(biāo)準(zhǔn)流的盒子。

特： 特別注意，首先浮動(dòng)的盒子需要和標(biāo)準(zhǔn)流的父級(jí)搭配使用， 其次 特別的注意浮動(dòng)可以使元素顯示模式體現(xiàn)為行內(nèi)塊特性。

版心和布局流程

閱讀報(bào)紙時(shí)容易發(fā)現(xiàn)，雖然報(bào)紙中的內(nèi)容很多，但是經(jīng)過合理地排版，版面依然清晰、易讀。同樣，在制作網(wǎng)頁時(shí)，要想使頁面結(jié)構(gòu)清晰、有條理，也需要對(duì)網(wǎng)頁進(jìn)行“排版”。

“版心”(可視區(qū)) 是指網(wǎng)頁中主體內(nèi)容所在的區(qū)域。一般在瀏覽器窗口中水平居中顯示，常見的寬度值為960px、980px、1000px、1200px等。

布局流程

為了提高網(wǎng)頁制作的效率，布局時(shí)通常需要遵守一定的布局流程，具體如下：

1、確定頁面的版心（可視區(qū)）。

2、分析頁面中的行模塊，以及每個(gè)行模塊中的列模塊。

3、制作HTML結(jié)構(gòu) 。

4、CSS初始化，然后開始運(yùn)用盒子模型的原理，通過DIV+CSS布局來控制網(wǎng)頁的各個(gè)模塊。

一列固定寬度且居中

清除浮動(dòng)

人生就像乘坐北京地鐵一號(hào)線：

途經(jīng)國貿(mào)，羨慕繁華；

途經(jīng)天安門，幻想權(quán)力；

途經(jīng)金融街，夢(mèng)想發(fā)財(cái)；

經(jīng)過公主墳，遙想華麗家族；

經(jīng)過玉泉路，依然雄心勃勃…

這時(shí)，有個(gè)聲音飄然入耳:乘客你好,八寶山馬上就要到了！

頓時(shí)醒悟：人生苦短，有始有終。

好比我們的浮動(dòng)，有浮動(dòng)開始，則就應(yīng)該有浮動(dòng)結(jié)束。

為什么要清除浮動(dòng)

我們前面說過，浮動(dòng)本質(zhì)是用來做一些文字混排效果的，但是被我們拿來做布局用，則會(huì)有很多的問題出現(xiàn)， 但是，你不能說浮動(dòng)不好

。

由于浮動(dòng)元素不再占用原文檔流的位置，所以它會(huì)對(duì)后面的元素排版產(chǎn)生影響，為了解決這些問題，此時(shí)就需要在該元素中清除浮動(dòng)。

準(zhǔn)確地說，并不是清除浮動(dòng)，而是清除浮動(dòng)后造成的影響

如果浮動(dòng)一開始就是一個(gè)美麗的錯(cuò)誤，那么請(qǐng)用正確的方法挽救它。

清除浮動(dòng)本質(zhì)

清除浮動(dòng)主要為了解決父級(jí)元素因?yàn)樽蛹?jí)浮動(dòng)引起內(nèi)部高度為0 的問題。

清除浮動(dòng)的方法

其實(shí)本質(zhì)叫做閉合浮動(dòng)更好一些, 記住，清除浮動(dòng)就是把浮動(dòng)的盒子圈到里面，讓父盒子閉合出口和入口不讓他們出來影響其他元素。

在CSS中，clear屬性用于清除浮動(dòng)，其基本語法格式如下：

選擇器{clear:屬性值;}

額外標(biāo)簽法

是W3C推薦的做法是通過在浮動(dòng)元素末尾添加一個(gè)空的標(biāo)簽例如 <div style=”clear:both”></div>，或則其他標(biāo)簽br等亦可。

優(yōu)點(diǎn)： 通俗易懂，書寫方便

缺點(diǎn)： 添加許多無意義的標(biāo)簽，結(jié)構(gòu)化較差。 我只能說，w3c你推薦的方法我不接受，你不值得擁有。。。

父級(jí)添加overflow屬性方法

可以通過觸發(fā)BFC的方式，可以實(shí)現(xiàn)清除浮動(dòng)效果。（BFC后面講解）

可以給父級(jí)添加： overflow為 hidden|auto|scroll 都可以實(shí)現(xiàn)。

優(yōu)點(diǎn)： 代碼簡(jiǎn)潔

缺點(diǎn)： 內(nèi)容增多時(shí)候容易造成不會(huì)自動(dòng)換行導(dǎo)致內(nèi)容被隱藏掉，無法顯示需要溢出的元素。

使用after偽元素清除浮動(dòng)

:after 方式為空元素的升級(jí)版，好處是不用單獨(dú)加標(biāo)簽了

使用方法：

 .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } 
?
 .clearfix {*zoom: 1;} /* IE6、7 專有 */

優(yōu)點(diǎn)： 符合閉合浮動(dòng)思想 結(jié)構(gòu)語義化正確

缺點(diǎn)： 由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout。

代表網(wǎng)站： 百度、淘寶網(wǎng)、網(wǎng)易等

注意： content:"." 里面盡量跟一個(gè)小點(diǎn)，或者其他，盡量不要為空，否則再firefox 7.0前的版本會(huì)有生成空格。

使用before和after雙偽元素清除浮動(dòng)

使用方法：

.clearfix:before,.clearfix:after { 
 content:"";
 display:table; /* 這句話可以出發(fā)BFC BFC可以清除浮動(dòng),BFC我們后面講 */
}
.clearfix:after {
 clear:both;
}
.clearfix {
 *zoom:1;
}

優(yōu)點(diǎn)： 代碼更簡(jiǎn)潔

缺點(diǎn)： 由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout。

代表網(wǎng)站： 小米、騰訊等