1.浮動
為什麼要使用浮動？
請看以下問題？
怎麼把以下三個div標籤一行顯示？
<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document<
/title>
div
div:nth-
child(2
)<
/style>
<
/head>
哈哈<
/div>
哈哈<
/div>
哈哈<
/div>
<
/body>
<
/html>
<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document<
/title>
div
div:nth-
child(2
) div:nth-
child(1
) div:nth-
child(3
)<
/style>
<
/head>
哈哈<
/div>
哈哈<
/div>
哈哈<
/div>
<
/body>
<
/html>
1：不再是標準流了。
2：元素之間沒有空格了。
由於在實際開發中，我們很少會給父級盒子設定乙個指定的高度，下面這個例子可以看出浮動的壞處
<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document<
/title>
.div1
.div2
.div3
<
/style>
<
/head>
="div1"
>haha<
/div>
="div2"
>caca<
/div>
<
/div>
="div3"
>
<
/div>
<
/body>
<
/html>
static是position屬性的預設值。如果省略position屬性，瀏覽器就認為該元素是static定位。這時，瀏覽器會按照原始碼的順序，決定每個元素的位置，這稱為"正常的頁面流"（normal flow)，也就是之前所提到的標準流。每個塊級元素佔據自己的區塊（block），元素與元素之間不產生重疊，這個位置就是元素的預設位置。非常值得注意的一點是：static定位所導致的元素位置，是瀏覽器自主決定的，所以這時top、bottom、left、right這四個屬性無效。
可以檢視如下示例
<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document<
/title>
div
body
<
/style>
<
/head>
<
/div>
<
/body>
<
/html>
這三種定位都不會對其他元素的位置產生影響，之前提到文件流、浮動和絕對定位三者之間的關係，由於定位是處於大氣層的關係，因為可以疊在其他文件流或者浮動元素的上方，產生重疊效果。
relative
relative表示，相對於預設位置（即static時的位置）進行偏移，即定位基點是元素的預設位置。
<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document<
/title>
div
body
<
/style>
<
/head>
<
/div>
<
/body>
<
/html>
absolute表示，相對於上級元素（一般是父元素）進行偏移，即定位基點是父元素。它有乙個重要的限制條件：定位基點（一般是父元素）不能是static定位，否則定位基點就會變成整個網頁的根元素html。另外，absolute定位也必須搭配top、bottom、left、right這四個屬性一起使用。上面**中，父元素是relative定位，子元素是absolute定位，所以子元素的定位基點是父元素，相對于父元素的頂部向下偏移20px。如果父元素是static定位，上例的子元素就是距離網頁的頂部向下偏移20px。注意，absolute定位的元素會被"正常頁面流"忽略，即在"正常頁面流"中，該元素所佔空間為零，周邊元素不受影響。也就是脫離文件流，處於大氣層fixed
fixed表示，相對於視口（viewport，瀏覽器視窗）進行偏移，即定位基點是瀏覽器視窗。這會導致元素的位置不隨頁面滾動而變化，好像固定在網頁上一樣。它如果搭配top、bottom、left、right這四個屬性一起使用，表示元素的初始位置是基於視口計算的，否則初始位置就是元素的static位置。
<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document<
/title>
div
div:nth-
child(2
)<
/style>
<
/head>
<
/div>
<
/div>
<
/div>
<
/body>
<
/html>
動態固定效果
定位和浮動
能把元素定在螢幕的任意位置，該元素脫離文件流。什麼是文件流 文件流指的是元素排版布局過程中，元素會自動從左往右，自上而下的流式布局。一 relative 相對定位 相對定位的元素相對於自身偏移 相對定位的元素不會脫離文件流 二 absolute 絕對定位 使元素完全脫離文件流 相對於 static ...
浮動和定位
浮動 float float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於影象，使文字圍繞在影象周圍，不過在 css 中，任何元素都可以浮動。浮動元素會生成乙個塊級框，而不論它本身是何種元素。如果浮動非替換元素，則要指定乙個明確的寬度 否則，它們會盡可能地窄。注釋 假如在一行之上只有極少的空間可...
浮動和定位
float屬性 高度塌陷 清除浮動 清除浮動不是不讓元素浮動，而是清除浮動對父級帶來的影響 清除浮動的方法 給浮動元素的父級設定高度height 不推薦使用 缺點 很多情況下 高度都是不確定的 所有不適用 以浮制浮，給浮動元素的父元素設定浮動，原理是開啟bfc 不推薦使用 缺點 只有在父級需要浮動的...