2025-09-05 CSS4——浮動與定位

文章目錄

1 顯示（Display）
- 1.1 visibility:hidden
- 1.2 display:none
2 塊和內聯元素
- 2.1 塊元素
- 2.2 內聯元素
- 2.3 改變元素的顯示方式
3 浮動（Float）
- 3.1 `float` 屬性
- 3.2 `clear` 屬性
4 定位（Position）
- 4.1 五種定位模式
- - 4.1.1 `static`
  - 4.1.2 `relative`
  - 4.1.3 `absolute`
  - 4.1.4 `fixed`
  - 4.1.5 `sticky`
- 4.2 `z-index`
- 4.3 CSS 定位屬性一覽
5 溢出（Overflow）

1 顯示（Display）

在 CSS 中，Display 和 Visibility 是兩個與元素顯示狀態相關的重要屬性。

Display 屬性：用于設置一個元素應如何顯示。
Visibility 屬性：用于指定一個元素應可見還是隱藏。

隱藏一個元素主要有兩種方法，分別是將 display 屬性設置為 “none”，以及將 visibility 屬性設置為 “hidden”，但它們會產生不同的結果。

1.1 visibility:hidden

當把元素的 visibility 屬性設置為 “hidden” 時，該元素會被隱藏，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然看不見了，但仍然會對頁面的布局產生影響。

實例：

h1.hidden {visibility:hidden;}

1.2 display:none

當把元素的 display 屬性設置為 “none” 時，該元素會被隱藏，并且隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失。

實例：

h1.hidden {display:none;}

舉例說明兩者區別：

假設有三個盒子 Box 1、Box 2、Box 3 并排排列。

若將 Box 2 的 visibility 設置為 hidden，那么 Box 2 會消失，但 Box 1 和 Box 3 的位置不會發生變化，因為 Box 2 仍然占據著原來的空間。
若將 Box 2 的 display 設置為 none，那么 Box 2 會消失，同時 Box 1 和 Box 3 會向中間靠攏，填補 Box 2 原來占據的空間。

2 塊和內聯元素

2.1 塊元素

塊元素是這樣一種元素，它會占用全部寬度，在其前后都會有換行符。

常見的塊元素例子有：

<h1>
<p>
<div>

2.2 內聯元素

內聯元素只需要占據必要的寬度，不會強制換行。

常見的內聯元素例子有：

<span>
<a>

2.3 改變元素的顯示方式

在實際開發中，我們可以更改內聯元素和塊元素的顯示方式，反之亦然，這樣能讓頁面以特定的方式組合，同時仍然遵循 web 標準。

將列表項顯示為內聯元素

li {display:inline;}

通過這樣的設置，原本作為塊元素、會換行顯示的列表項，將變成內聯元素，在同一行顯示。

將 span 元素作為塊元素

span {display:block;}

原本作為內聯元素的 span，設置后會變成塊元素，占用全部寬度，前后有換行符。

3 浮動（Float）

想象一下 Word 或 Google Docs 里的“文字環繞圖片”功能。當你設置一張圖片環繞時，圖片會靠在頁面的左邊或右邊，而文字會自動圍繞在它的周圍。

CSS 的 float 屬性做的就是類似的事情。

核心作用：讓一個元素（比如一張圖片或一個 <div> 塊）脫離正常的文檔流，像船一樣“浮”起來，然后向左或向右移動。
移動方向：float 只能讓元素進行水平方向（左或右）的移動，不能上下移動。
移動規則：浮動元素會一直向指定方向移動，直到碰到其父容器的邊界，或者碰到另一個已經浮動的元素。
對周圍元素的影響：
- 在浮動元素之后的元素，會識別到浮動元素的存在，并圍繞它進行重新排列（這就是“文字環繞”效果的來源）。
- 在浮動元素之前的元素，則完全不受影響。

3.1 `float` 屬性

使用起來非常簡單，基本語法就是 selector { float: value; }。

float 有以下幾個值：

left: 元素向左浮動。
right: 元素向右浮動。
none: 默認值，元素不浮動，老老實實待在原來的位置。

以下 float 的經典應用。我們想讓一張圖片靠右顯示，文字在它的左邊環繞。

<!DOCTYPE html>
<html><head><meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title><style>img {float:right;}</style></head><body><p>在下面的段落中，我們添加了一個 <b>float:right</b> 的圖片。導致圖片將會浮動在段落的右邊。</p><p><img src="logocss.gif" width="95" height="84" />這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。</p></body></html>

3.2 `clear` 屬性

浮動雖然好用，但它有一個副作用：父容器高度塌陷。因為子元素浮動后脫離了正常的文檔流，父容器會認為內部沒有內容了，導致高度變為0（如果你沒有明確設置高度的話），這會影響后續布局。

為了解決這個問題，以及避免后續元素也跟著環繞浮動元素，我們需要“清除浮動”。

clear 屬性就是專門用來干這個的。

clear 屬性告訴一個元素：“你的旁邊不能有浮動的元素”。

clear: left;: 元素的左側不允許有浮動元素。
clear: right;: 元素的右側不允許有浮動元素。
clear: both;: （最常用） 元素的左側和右側都不允許有浮動元素。
none: 默認值，允許兩側有浮動元素。

如果我們想在圖片廊下方添加一行文字，并且不希望這行文字“擠”到圖片廊的右邊，就需要清除浮動。

<!DOCTYPE html>
<html><head><meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style>.thumbnail {float:left;width:110px;height:90px;margin:5px;}.text_line{clear:both;margin-bottom:2px;}</style></head><body><h3>圖片庫</h3><p>試著調整窗口,看看當圖片沒有足夠的空間會發生什么。.</p><img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90"><img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80"><img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90"><img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90"><h3 class="text_line">第二行</h3><img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90"><img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80"><img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90"><img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90"></body>
</html>

屬性	描述	可選值
`float`	指定一個元素是否浮動，以及向哪個方向浮動。	`left`, `right`, `none`, `inherit`
`clear`	指定一個元素的哪一側不允許有浮動元素。	`left`, `right`, `both`, `none`, `inherit`

4 定位（Position）

在默認情況下，HTML 元素會按照它們在代碼中出現的順序，一個接一個地排列，這被稱為“正常的文檔流”。

position 屬性允許你打破這個正常的文檔流，為元素開啟一種新的、可精確控制的定位模式。

關鍵點：一旦你為一個元素設置了 position 屬性（static 除外），你就可以使用 top、right、bottom、left 這四個“坐標”屬性來精確地移動它。如果 position 是默認的 static，這四個坐標屬性是無效的。

position 屬性有五個可選值，我們來逐一解析。

4.1 五種定位模式

4.1.1 `static`

這是每個 HTML 元素的默認值。

行為描述：元素遵循正常的文檔流，就像你什么都沒設置一樣。它不會被特殊定位。
坐標屬性：top, right, bottom, left 對它完全無效。
用途：通常用于取消已經設置的定位，讓元素恢復到默認的文檔流狀態。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>菜鳥教程(runoob.com)</title><style>div.static {position: static;border: 3px solid #73AD21;}</style></head><body><h2>position: static;</h2><p>使用 position: static; 定位的元素，無特殊定位，遵循正常的文檔流對象:</p><div class="static">該元素使用了 position: static;</div></body>
</html>

這是“無為而治”的模式，元素老老實實地待在它本來應該在的地方。

4.1.2 `relative`

這是最常用、也最關鍵的定位模式之一。

行為描述：元素的位置是相對于它在正常文檔流中的原始位置進行移動。
坐標屬性：top, right, bottom, left 會讓元素從其原始位置出發，移動指定的距離。
空間占用：最重要的一點！即使元素移動了，它在文檔流中原本占據的空間仍然保留。后面的元素不會“擠”上來填補這個空間。
主要用途：
1. 對元素進行微調，移動位置。
2. （核心用途） 作為 absolute 定位元素的“容器”或“錨點”。

<!DOCTYPE html>
<html><head><meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style>h2.pos_left{position:relative;left:-20px;}h2.pos_right{position:relative;left:20px;}</style></head><body><h2>這是位于正常位置的標題</h2><h2 class="pos_left">這個標題相對于其正常位置向左移動</h2><h2 class="pos_right">這個標題相對于其正常位置向右移動</h2><p>相對定位會按照元素的原始位置對該元素進行移動。</p><p>樣式 "left:-20px" 從元素的原始左側位置減去 20 像素。</p><p>樣式 "left:20px" 向元素的原始左側位置增加 20 像素。</p></body></html>

relative 就像給元素貼上了一個“隱形的錨”，然后你拉動這個錨讓元素移動，但它原來的“坑”還在，不會影響整體隊伍的排列。

4.1.3 `absolute`

absolute 是一個非常強大的定位模式，能實現精確的布局。

行為描述：元素的位置是相對于其最近的、已定位的（非 static）父元素來進行定位。如果找不到這樣的父元素，它會一直往上找，最終相對于 <html> 元素（也就是整個瀏覽器頁面）進行定位。
空間占用：元素會完全脫離文檔流，不再占據任何空間。它會像浮起來一樣，可以覆蓋在其他元素之上。
用途：常用于需要精確放置在頁面某個位置的元素，如彈窗、圖標、自定義下拉菜單等。

<!DOCTYPE html>
<html><head><meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style>h2{position:absolute;left:100px;top:150px;}</style></head><body><h2>這是一個絕對定位了的標題</h2><p>用絕對定位,一個元素可以放在頁面上的任何位置。標題下面放置距離左邊的頁面100 px和距離頁面的頂部150 px的元素。.</p></body></html>

absolute 就像一張貼紙，你可以把它精確地貼在“畫板”（已定位的父元素）的任何位置。把它貼上去后，它下面的內容會被遮住，因為它不占位置。

4.1.4 `fixed`

行為描述：元素的位置是相對于瀏覽器窗口來定位的，它會被“釘”在屏幕的某個位置，即使用戶滾動頁面，它的位置也不會改變。
空間占用：與 absolute 一樣，元素會完全脫離文檔流，不占據空間。
用途：非常適合制作固定在頂部的導航欄、側邊欄、返回頂部按鈕或廣告彈窗。

<!DOCTYPE html>
<html><head><meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style>p.pos_fixed{position:fixed;top:30px;right:5px;}</style></head><body><p class="pos_fixed">Some more text</p><p><b>注意:</b> IE7 和 IE8 支持只有一個 !DOCTYPE 指定固定值.</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p></body>
</html>

fixed 就像屏幕上的一個污點，無論你怎么滾動頁面內容，它都固定在那個位置不動。

4.1.5 `sticky`

這是 relative 和 fixed 的混合體，非常智能。

行為描述：元素在正常情況下表現得像 position: relative，會隨著頁面滾動。但當它滾動到你設定的閾值位置（由 top, right, bottom, left 之一指定）時，它就會“粘”在那里，表現得像 position: fixed。
生效條件：必須至少指定 top, right, bottom, left 中的一個，sticky 才會生效。
瀏覽器兼容性：需要注意，老版本的瀏覽器（如 IE）可能不支持。在 Safari 中可能需要添加 -webkit- 前綴。

<!DOCTYPE html>
<html><head><meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style>div.sticky {position: -webkit-sticky;position: sticky;top: 0;padding: 5px;background-color: #cae8ca;border: 2px solid #4CAF50;}</style></head><body><p>嘗試滾動頁面。</p><p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 屬性。</p><div class="sticky">我是粘性定位!</div><div style="padding-bottom:2000px"><p>滾動我</p><p>來回滾動我</p><p>滾動我</p><p>來回滾動我</p><p>滾動我</p><p>來回滾動我</p></div></body>
</html>

sticky 就像一個有“磁性”的導航欄。平時它跟著內容走，一旦滾動到頁面頂部，它就像被磁鐵吸住一樣，固定在那里不動了。

4.2 `z-index`

當元素使用了 absolute, fixed, sticky 定位后，它們脫離了文檔流，就可能會相互重疊。那么，誰在上面，誰在下面呢？

z-index 屬性就是用來控制這些重疊元素的“堆疊順序”的，就像圖層一樣。

規則：z-index 的值是一個整數，可以是正數、負數或 0。數值越大的元素，越顯示在上面。
默認情況：如果不設置 z-index，那么在 HTML 代碼中寫在后面的元素會覆蓋在寫在前面的元素之上。
注意：z-index 只對設置了 position 屬性（非 static）的元素有效。

4.3 CSS 定位屬性一覽

屬性	說明	常用值示例
`position`	指定元素的定位類型。	`static`, `relative`, `absolute`, `fixed`, `sticky`
`top`	定義定位元素上邊緣與其包含塊上邊緣的偏移。	`auto`, `10px`, `20%`
`right`	定義定位元素右邊緣與其包含塊右邊緣的偏移。	`auto`, `10px`, `20%`
`bottom`	定義定位元素下邊緣與其包含塊下邊緣的偏移。	`auto`, `10px`, `20%`
`left`	定義定位元素左邊緣與其包含塊左邊緣的偏移。	`auto`, `10px`, `20%`
`z-index`	設置元素的堆疊順序。	`auto`, `1`, `100`, `-1`
`overflow`	設置當內容溢出元素區域時的處理方式。	`visible`, `hidden`, `scroll`, `auto`
`clip`	裁剪一個絕對定位的元素（現已不常用，推薦使用`clip-path`）。	`auto`, `shape(rect(0px, 50px, 50px, 0px))`
`cursor`	定義鼠標指針懸停在元素上時顯示的樣式。	`pointer`, `default`, `move`, `text`

5 溢出（Overflow）

CSS overflow 屬性可以控制內容溢出元素框時在對應的元素區間內添加滾動條。

overflow屬性有以下值：

值	描述
visible	默認值。內容不會被修剪，會呈現在元素框之外。
hidden	內容會被修剪，并且其余內容是不可見的。
scroll	內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
auto	如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。
inherit	規定應該從父元素繼承 overflow 屬性的值。

overflow 屬性只工作于指定高度的塊元素上。

在 OS X Lion ( Mac 系統) 系統上，滾動條默認是隱藏的，使用的時候才會顯示 (設置 “overflow:scroll” 也是一樣的)。

默認情況下，overflow 的值為 visible，意思是內容溢出元素框：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>菜鳥教程(runoob.com)</title><style>div {background-color: #eee;width: 200px;height: 50px;border: 1px dotted black;overflow: visible;}</style></head><body><div id="overflowTest"><p>這里的文本內容會溢出元素框。</p><p>這里的文本內容會溢出元素框。</p><p>這里的文本內容會溢出元素框。</p></div></body>
</html>