通流(normal flow)

這個單詞很多人翻譯為 文檔流 ， 字面翻譯 普通流 或者標準流都可以。

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

CSS的定位機制有3種：普通流（標準流）、浮動和定位。

html語言當中另外一個相當重要的概念----------標準流！或者普通流。普通流實際上就是一個網頁內標簽元素正常從上到下，從左到右排列順序的意思，比如塊級元素會獨占一行，行內元素會按順序依次前后排列；按照這種大前提的布局排列之下絕對不會出現例外的情況叫做普通流布局。

浮動(float)

浮動最早是用來控制圖片，以便達到其他元素（特別是文字）實現“環繞”圖片的效果。

后來，我們發現浮動有個很有意思的事情：就是讓任何盒子可以一行排列,因此我們就慢慢的偏離主題，用浮動的特性來布局了。（CSS3已經我們真正意義上的網頁布局）

什么是浮動？

元素的浮動是指設置了浮動屬性的元素會脫離標準普通流的控制，移動到其父元素中指定位置的過程。

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

選擇器{float:屬性值;}

浮動詳細內幕特性

浮動脫離標準流，不占位置，會影響標準流。浮動只有左右浮動。

浮動首先創建包含塊的概念（包裹）。就是說， 浮動的元素總是找理它最近的父級元素對齊。但是不會超出內邊距的范圍。 

浮動的元素排列位置，跟上一個元素（塊級）有關系。如果上一個元素有浮動，則A元素頂部會和上一個元素的頂部對齊；如果上一個元素是標準流，則A元素的頂部會和上一個元素的底部對齊。

由2可以推斷出，一個父盒子里面的子盒子，如果其中一個子級有浮動的，則其他子級都需要浮動。這樣才能一行對齊顯示。

元素添加浮動后，元素會具有行內塊元素的特性。元素的大小完全取決于定義的大小或者默認的內容多少浮動根據元素書寫的位置來顯示相應的浮動。

總結： 浮動 --->

浮動的目的就是為了讓多個塊級元素同一行上顯示。

float 浮 漏 特

浮： 加了浮動的元素盒子是浮起來的，漂浮在其他的標準流盒子上面。

漏： 加了浮動的盒子，不占位置的，它浮起來了，它原來的位置漏 給了標準流的盒子。

特： 特別注意，首先浮動的盒子需要和標準流的父級搭配使用， 其次 特別的注意浮動可以使元素顯示模式體現為行內塊特性。

版心和布局流程

閱讀報紙時容易發現，雖然報紙中的內容很多，但是經過合理地排版，版面依然清晰、易讀。同樣，在制作網頁時，要想使頁面結構清晰、有條理，也需要對網頁進行“排版”。

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

布局流程

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

1、確定頁面的版心（可視區）。

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

3、制作HTML結構 。

4、CSS初始化，然后開始運用盒子模型的原理，通過DIV+CSS布局來控制網頁的各個模塊。

一列固定寬度且居中

清除浮動

人生就像乘坐北京地鐵一號線：

途經國貿，羨慕繁華；

途經天安門，幻想權力；

途經金融街，夢想發財；

經過公主墳，遙想華麗家族；

經過玉泉路，依然雄心勃勃…

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

頓時醒悟：人生苦短，有始有終。

好比我們的浮動，有浮動開始，則就應該有浮動結束。

為什么要清除浮動

我們前面說過，浮動本質是用來做一些文字混排效果的，但是被我們拿來做布局用，則會有很多的問題出現， 但是，你不能說浮動不好

。

由于浮動元素不再占用原文檔流的位置，所以它會對后面的元素排版產生影響，為了解決這些問題，此時就需要在該元素中清除浮動。

準確地說，并不是清除浮動，而是清除浮動后造成的影響

如果浮動一開始就是一個美麗的錯誤，那么請用正確的方法挽救它。

清除浮動本質

清除浮動主要為了解決父級元素因為子級浮動引起內部高度為0 的問題。

清除浮動的方法

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

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

選擇器{clear:屬性值;}

額外標簽法

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

優點： 通俗易懂，書寫方便

缺點： 添加許多無意義的標簽，結構化較差。 我只能說，w3c你推薦的方法我不接受，你不值得擁有。。。

父級添加overflow屬性方法

可以通過觸發BFC的方式，可以實現清除浮動效果。（BFC后面講解）

可以給父級添加： overflow為 hidden|auto|scroll 都可以實現。

優點： 代碼簡潔

缺點： 內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素。

使用after偽元素清除浮動

:after 方式為空元素的升級版，好處是不用單獨加標簽了

使用方法：

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

優點： 符合閉合浮動思想 結構語義化正確

缺點： 由于IE6-7不支持:after，使用 zoom:1觸發 hasLayout。

代表網站： 百度、淘寶網、網易等

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

使用before和after雙偽元素清除浮動

使用方法：

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

優點： 代碼更簡潔

缺點： 由于IE6-7不支持:after，使用 zoom:1觸發 hasLayout。

代表網站： 小米、騰訊等

篇文章主要給大家介紹一下使用html+css來模仿制作小米官方網站右側的浮動框。我們來看下邊的這個浮動框，位于小米官網的右側并且隨著頁面的滾動，一直浮動在右側不變；

我們通過上邊的圖片可以看出圖片有5個單獨的塊元素組成，每個塊元素鼠標經過都有一個單獨的顏色變為黃色的效果，然后第一個塊元素鼠標經過還會在左側彈出更多內容。接下來我們簡單說一下制作所用到的核心知識。

1）制作頁面所需知識點

1、列表標簽（dl dd dt）的使用，使用dl和dd來完成前邊5個相同模塊的制作

2、鼠標經過（hover）的使用，第一個元素鼠標經過左側顯示，這個跟我們之前將的導航菜單類似，還有鼠標經過文字以及圖片改變顏色，這里可以使用hover之后改變背景圖片來實現；

3、浮動（fixed）的使用，該內容一直浮動在網頁右側，跟隨頁面一起滾動，我們可以使用position:fixed來實現；

2）代碼實操演練

大體了解了我們所要使用的知識點之后，我們就可以開始根據圖片上的內容來制作我們所需要的頁面了，具體的實現代碼就如下方所示：（首先寫一個div盒子，看到列表形式，直接使用dl和dd，然后每個元素內部有文字和圖片，使用h4標簽和span標簽來存放圖片和文字內容，就這么搞定了哈哈），來看代碼吧。

html代碼挺簡單的，我們啪啪敲完之后呢，剩下的就是書寫css代碼，來完成圖片所示的布局樣式的制作了。那么我們的css代碼就如下圖所示：（最外層box直接來個fixed和right、bottom配合，讓其浮動在右側，然后寫寫dl和dd的寬高，控制控制span的背景，隨便寫寫hover事件，ok完成了）。不多說了，看代碼吧。

好了，本篇文章就給大家說到這里，大家自己動手寫一下看能不能寫出一樣的頁面效果出來，也可以找一些類似的頁面自己練習一下，有需要源碼的可以直接私信【網站源碼】即可。

每日金句：只有知道別人心里在想什么，你才能得到你想要的。喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。