浮動基礎筆記

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

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

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

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

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

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

選擇器

屬性值

描述left

元素向左浮動

right

元素向右浮動

none

元素不浮動（預設值）

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

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

結：浮動 --->

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

float 浮漏特

浮：加了浮動的元素盒子是浮起來的，漂浮在其他的標準流盒子上面。漏：加了浮動的盒子，不佔位置的，它浮起來了，它原來的位置漏給了標準流的盒子。特：特別注意，首先浮動的盒子需要和標準流的父級搭配使用，其次特別的注意浮動可以使元素顯示模式體現為行內塊特性。

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

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

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

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

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

3、製作html結構。

4、css初始化，然後開始運用盒子模型的原理，通過div+css布局來控制網頁的各個模組。