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>