網頁布局 float與position的區別

網頁開發中布局是乙個永恆的話題。巧妙的布局會讓網頁具有良好的適應性和擴充套件性。css的布局主要涉及兩個屬性——position和float。它們倆看上去很容易被弄混，可是仔細分析一下，它們的區別還是很明顯的。下面和大家分享一下我的學習心得。

首先，先介紹乙個很重要的概念「文件流」，明白了這個概念之後就很容易理解position和float的定位原理了。

在css中有乙個z-index屬性，因為網頁是「立體的」，它有z軸，這個z軸的大小就由z-index控制。預設情況下，所有頁面元素均位於z-index:0這一層，而這一層順序排列的元素就構成了「文件流」。無論是position還是float，它們都是通過改變文件流來實現定位。

css有三種基本的定位機制：文件流、浮動和絕對定位。除非專門指定，否則所有元素都在文件流中定位。也就是說，文件流中的元素的位置由元素在 x(html) 中的位置決定。css定位的基本思想很簡單，它允許你使得元素相對於其正常應該出現的位置，或者相對于父元素、另乙個元素甚至瀏覽器視窗本身的位置來進行定位。

下面介紹position和float的定位原理。

（一）float：

float屬性定位的元素位於z-index:0層。它是通過float:left和float:right來控制元素在0層左浮或右浮。float會改變正常的文件流排列，影響到周圍元素。float元素在文件流中乙個挨乙個排列。但注意，只是float元素之間乙個挨乙個排列，對於非float的元素，float元素是視而不見的，會越過它們。

如下面的一段**：

我是float元素1

我是非float元素
我是float元素2
我是float元素3

概括來說，float:left時，會把非float元素擠到所有float元素的右邊，float:right時是擠到左邊。

（二）position：

position屬性包括下面四個值：

static（預設） 

relative 

absolute 

fixed

設定absolute或relative會讓z-index的值大於0。不同的是，absolute完全脫離文件流，不再在z-index中保留佔位符，而relative雖然自己已浮起來，但仍然會保留自己在z-index:0中的位置，因此relative在z-index:0層中的相鄰元素不會因此受到影響。下面是具體用法。

1. 靜態（static）：

元素順序顯示，在乙個文件流中，乙個挨著乙個，但是不像relative那樣可以設定top之類的。靜態定位僅僅意味著內容遵循正常從上到下的html流。

2. 相對(relative)：

乙個相對定位的元素相對它在html流中的當前位置而放置。移動乙個帶有相對定位的元素，在該元素本該放置的地方留下了乙個「洞」。相對定位的主要用處不是移動乙個元素，而是給行內在它內部的絕對定位的元素設定乙個新的參考點。

position: relative的元素相對於自己本來應該在的位置進行偏移，偏移後的位置可能覆蓋別人（是漂浮在上方）。它原來的位置也空著，因為它會被加入到文件流中。

3. 絕對(absolute)：

絕對定位讓你通過以pixel、em、percentage來指定乙個左、右、上或者下的位置來確定乙個元素的位置。此外，絕對定位的元素被完全與頁面流分離，換句話說，網頁上的其他東西甚至不知道這個絕對定位的元素的存在。

absolute定位的一般用法：

即，position: absolute的元素在static的父元素中是相對頁面（不是瀏覽器視窗）進行偏移，在非static父元素中（通常是relative，因為如果父元素是absolute，那父元素還要向上找非static祖先元素）是相對父元素進行偏移。

4. 固定(fixed)：

乙個固定的元素被鎖定在螢幕的位置上。fixed是相對瀏覽器視窗的固定位置定位，如網頁中的「回到頂部」按鈕。

注意：不要試圖給同乙個樣式既應用float屬性又應用任何一種定位，除了靜態或者相對定位之外。浮動和絕對或者固定定位不可能同時作用在同乙個元素上。

補充:

Float浮動布局

什麼是浮動布局？浮動可以設定元素，脫離正常的文件流，向右或者向左，靠近父元素的邊緣或者是設定了浮動的其他的元素的邊緣靠攏。比如，我們使用div等塊標籤的時候，它們都是獨佔一行，但是很多時候要將多個div併排放置，這種情況就可以使用浮動布局。浮動可以那些問題？使用浮動布局之後 這裡也是可以使用浮動解決...

CSS布局與定位,flow流,float

web頁面布局分為 流體布局liquid layouts 無論瀏覽器調整到多大寬度,布局都會擴充套件,填滿整個瀏覽器。凍結布局fozen layouts 凍結布局會鎖定元素使之讓它們凍結在頁面上,以此可避免視窗擴充套件帶來的許多問題 慕課 在網頁中，元素有三種布局模型 1 流動模型 flow 2 浮...

css布局float浮動布局詳解

float屬性 頁面布局時主要採用 浮動 float 和定位 position 還有就是即不浮動也不定位的正常文件流結構三種 float屬性常用的語法是 float left right none 任何元素都可以被浮動，無論是塊元素div，ol，ul還是行內元素span strong都可以浮動，重要...