10 / 20

浮动与定位 | 自在学

浮动与定位

网页布局就像拼图游戏，每一个元素都应该找到合适的位置。CSS为我们提供了多种排列元素的方式，其中浮动和定位是最经典也是最基础的技术。虽然现在有了更先进的网格布局和弹性盒子，但理解浮动和定位仍然非常重要。浮动可以让元素"漂浮"在页面上，其他内容会自动围绕它排列，这种特性在创建文字环绕图片的效果时特别有用。

浮动与定位

实验室

浮动

浮动的概念最早可以追溯到上世纪90年代的网页设计。当时在HTML中，我们可以用 align="right" 属性让图片靠右显示，文字会自动绕着图片排列，就像报纸上的插图一样。CSS继承了这个想法，但让它变得更加灵活和强大——我们可以用 float 属性让任何元素都"漂浮"起来，不仅仅是图片，段落、列表甚至复杂的布局块都可以浮动。

在CSS中，float 属性是实现浮动效果的核心工具。它可以指定元素向左或向右浮动，让其他内容围绕它流动，形成独特的布局效果。float 属性就像一个开关，它决定了元素是否要“漂浮”以及漂向哪个方向。这个属性支持以下几个取值：

属性值	作用描述
`left`	让元素向左边漂浮
`right`	让元素向右边漂浮
`inline-start`	根据文字书写方向让元素向行首漂浮
`inline-end`	根据文字书写方向让元素向行尾漂浮
`none`	保持正常排列，不进行浮动

默认情况下，float 属性的值是 none，这意味着元素会按照正常的文档流排列。当我们设置为 float: left 或 float: right 时，元素就会脱离正常的排列顺序，像气球一样飘向指定的方向，而其他内容则会自动围绕着它流动。让我们通过一个简单的例子来理解浮动的基本效果：

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .float-image {
        float: left;
        width: 200px;
        height: 150px;
        margin: 10px;
        background-color: #e0e0e0;

从这个例子中我们可以看到，当元素浮动到左侧时，文字内容会从浮动元素的右侧开始排列，并且会继续向下流动。这种效果就是浮动的核心特性。

在实际开发中，我们主要使用 left 和 right 这两个值，因为它们更直观易懂。inline-start 和 inline-end 这两个值主要用于处理不同书写方向的场景，比如从右到左的文字排列。

浮动元素的独特行为

浮动元素有一些特别的特性，让它们在CSS中显得与众不同。最重要的是，浮动元素虽然脱离了正常的文档排列顺序，但仍然会影响页面整体的布局安排。这种"半脱离半参与"的状态是浮动最特别的地方——元素似乎飘浮在一个独立的层次上，却又能指挥其他内容如何排列。

这种影响力主要体现在其他正常排列的内容会自动围绕浮动元素流动。无论我们让图片、段落还是其他任何元素浮动，其他内容都会像水流一样避开浮动元素，围绕着它排列。

让我们用一个更复杂的例子来演示这个特性：

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .sidebar {
        float: right;
        width: 200px;
        padding: 15px;
        margin: 10px;
        background-color: #f0f0f0;

浮动元素的间距特点

浮动元素在边距处理上也有自己的规则：浮动元素的边距不会像正常元素那样发生折叠。这是浮动元素与普通文档流元素的重要区别之一。

在正常的页面排列中，相邻元素的垂直间距可能会相互合并，但浮动元素的间距不会这样。如果我们给一个浮动元素设置了25像素的外边距，那么它周围至少会有25像素的空隙。如果旁边还有其他有边距的元素，这些间距不会合并，而是会直接相加。

让我们通过一个例子来演示这个特性：

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .float-box {
        float: left;
        width: 150px;
        height: 150px;
        margin: 25px;
        background-color: #ffcccc;

在这个例子中，我们可以看到两个浮动元素之间至少有50像素的间距（每个元素25像素的边距）。如果这些是正常流元素，它们的边距可能会折叠，但浮动元素的边距不会发生这种情况。

取消浮动的 none 值

float 属性有一个特殊取值 none，它的作用是确保元素不会发生浮动。虽然元素默认就是不浮动的，但有时候我们需要明确指定这个值来覆盖其他样式规则。

举个例子，假设我们的网站样式表中设置了所有图片都要向右浮动，但在某个特定页面上，我们不希望图片浮动。这时我们就可以在这个页面的样式中使用 img { float: none; }，这样就能覆盖全局的浮动设置，让图片回到正常的排列位置。

float: none 是默认值，但它的存在是有意义的。如果没有这个值，我们就无法让元素回到正常的文档流中。在某些情况下，我们需要显式地设置这个值来覆盖继承或全局的浮动样式。

浮动的工作机制

要真正理解浮动是如何运作的，我们需要先认识一个关键概念：包含块。简单来说，浮动元素的包含块就是离它最近的那个块级祖先元素。这意味着浮动元素只能在自己的“活动范围”内移动，不能跑到包含块的外面去。

什么是包含块

包含块是CSS布局中的基础概念，它定义了元素可以活动的空间范围。对于浮动元素而言，它的包含块就是直接包含它的那个最近的块级元素。举例来说，如果一个浮动元素在段落里面，那么这个段落就是它的包含块。

|
<div>
  <p>
    这是一段普通的文字，里面有一个<span style="float: left;">向左浮动的文字</span>。
    这个浮动文字的活动范围就是这段落元素。
  </p>
</div>

在这个示例中，浮动元素的包含块是 <p> 标签，而不是外层的 <div> 容器，因为 <p> 是距离浮动元素最近的块级祖先元素。

浮动会改变元素的显示类型

浮动元素有一个特别的行为：不管原始元素是什么类型，一旦设置了浮动，它就会变成块级元素。这意味着即使我们让一个行内元素（如链接）浮动，它也会获得块级元素的特性。

比如说，如果我们让一个 <a> 链接元素浮动，它就会像 <div> 容器一样，可以自由设置宽度和高度，在浮动方向上占据全部可用空间。这个变化是自动发生的，我们不需要额外设置 display: block。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .float-link {
        float: left;
        width: 200px;
        height: 50px;
        background-color: #ccccff;
        border: 2px solid #0000ff

浮动元素的排列规则

CSS规范制定了一套详细的规则来决定浮动元素应该放在哪里。这些规则确保了浮动元素能够合理排列，既不会相互碰撞，也不会跑出自己的活动范围。掌握这些规则能帮我们更好地控制浮动布局。

第一条规则：不能超出活动范围

浮动元素的外边缘不能超过包含块的内边缘。这个道理很简单：向左浮动的元素，它的左边缘最多只能到达包含块的左边界；向右浮动的元素，右边缘最多只能到达包含块的右边界。

这条规则保证了浮动元素始终待在自己的“地盘”里，不会跑到外面去。下面这张图可以帮助我们理解：

第二条规则：避免元素重叠

为了防止浮动元素相互碰撞，CSS规定：向左浮动的元素，它的左边缘必须在前面出现的所有左浮动元素的右边缘右侧（除非后面的元素位置低于前面元素底部）。对于向右浮动的元素也有同样的规定。

这条规则保证了浮动元素按照它们在代码中出现的顺序排列，不会相互覆盖。如果一行空间不够容纳所有元素，后面的元素会被挤到下一行。

让我们通过一个例子来理解这个规则：

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .float-item {
        float: left;
        width: 200px;
        height: 100px;
        margin: 10px;
        background-color: #ccccff;

在这个例子中，我们可以看到三个浮动元素按照它们在文档中的顺序排列。如果空间不够，第三个元素会被推到下一行。

第三条规则：左右浮动互不侵犯

当左浮动元素旁边有右浮动元素时，左浮动元素的右边缘不能超过右浮动元素的左边缘。同样，右浮动元素的左边缘也不能超过左浮动元素的右边缘。

这条规则防止了左右浮动的元素相互挤压。如果两个浮动元素的宽度加起来超过了容器宽度，其中一个就会被挤到下一行。

第四条规则：不能向上飘浮

浮动元素的顶部边缘不能超过它父元素的内顶部边界。这条规则防止了浮动元素像气球一样向上飘到文档顶端。如果浮动元素正好在两个合并的边距之间，它会被放置得好像中间有一个块级父元素隔开。

这条规则的重要作用是避免浮动元素跑到不该去的地方。无论怎么设置，浮动元素都不能越过父元素的顶部边界向上移动。

第五条规则：不能越过前面的元素

浮动元素的顶部不能超过文档中任何出现在它前面的浮动元素或块级元素的顶部。这条规则进一步约束了浮动元素向上移动的空间。

如果前面的浮动元素已经被挤到下一行了，后面的浮动元素也不能"跳跃"过去跑到上面。这保证了所有浮动元素都按照它们在文档中出现的顺序排列。

第六条规则：不能超过当前行框

浮动元素的顶部不能超过文档中前面元素所在行框的顶部。这条规则继续限制浮动元素的向上移动能力。

举例来说，如果在一行文字中间放了一个浮动的图片，这个图片的顶部最多只能和它所在那一行的顶部平齐，不能向上移动到前面几行的位置。

第七条规则：不能超出容器边界

如果左浮动元素左侧已经有其他浮动元素了，那么它的右边缘不能超过包含块的右边界。同样，如果右浮动元素右侧已经有其他浮动元素了，那么它的左边缘不能超过包含块的左边界。

这条规则防止了多个浮动元素在一行排列时超出容器的范围。如果元素会超过边界，它就会被挤到下一行。

第八条规则：尽量放在最高位置

在满足前面所有规则的情况下，浮动元素应该被放置在尽可能高的位置。这条规则让浮动元素能够更好地利用可用空间。

在之前的浏览器版本中，浮动元素的顶部会和它所在行框的下一行顶部对齐。但按照这条规则，浮动元素的顶部应该和它所在行框的顶部对齐（前提是有足够的空间）。

第九条规则：尽量靠近边缘放置

左浮动的元素应该尽量靠左放置，右浮动的元素应该尽量靠右放置。更高的位置比更靠近边缘的位置更优先。

这条规则确保了浮动元素既能充分利用空间，又能保持在尽可能高的位置。在满足所有前面的规则后，浮动元素会尽可能地紧贴容器边缘排列。

这九条规则共同作用，确保了浮动元素能够按照预期的方式排列。虽然这些规则看起来很复杂，但浏览器会自动处理它们。我们只需要理解这些规则的基本原理，就能更好地使用浮动效果。

浮动在实际使用中的表现

虽然前面介绍了九条浮动规则，但实际应用中我们还会遇到一些特殊情况。这些现象有的来自于规则的明确规定，有的则是规则没有覆盖到的边缘情况。

浮动元素高度超过容器

经常会遇到这样的情况：浮动元素比它的父容器还要高。比如在一个简短的文档里，第一段文字里插入了一张大图片，这张图片的高度超过了段落本身。

当我们给父容器设置背景色时，会发现一个有趣的现象：浮动元素会从父容器的底部“伸出来”。这是因为浮动规则只约束了左、右、上三个方向的边界，对底部没有限制。这种设计是有意为之的，允许浮动元素向下延伸超出父容器。

让我们通过一个例子来演示这个现象：

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .paragraph {
        background-color: #ffffcc;
        border: 2px solid #ffcc00;
        padding: 15px;
        margin-bottom: 20px;
      }

如果我们希望将浮动元素包含在父元素内部，可以通过浮动父元素来实现。CSS规定，浮动元素会扩展以包含任何浮动的子元素。因此，如果我们浮动父元素，它就会包含其中的浮动子元素。

背景色与浮动元素的互动

浮动元素这种“半在半外”的特殊状态，带来了背景色与浮动元素之间有趣的互动关系。当页面中有浮动元素，而其他内容围绕它排列时，会产生什么效果？

标题的文字内容会被浮动元素推开，但标题元素的宽度仍然和父容器一样宽。所以标题的背景色会跨越整个父容器宽度。不过，实际的文字内容不会填满整个区域，而是会避开浮动元素，避免被遮挡。这种效果可以用下面的图来理解：

负外边距对浮动的影响

使用负外边距可以让浮动元素移出父容器的范围。这看起来好像违背了前面的规则，但实际上并没有。就像普通元素可以通过负边距超出父容器一样，浮动元素也可以通过负边距“伸出”父容器边界。比如说，一个向左浮动的图片设置了-15像素的左边距和上边距，而它所在的div容器没有任何内边距、边框或外边距。

虽然看起来好像违反了规则，但其实并没有。这是因为浮动规则要求浮动元素的外边缘必须在父元素内部，但负边距可以让浮动元素的内容有效地与其自身的外边缘重叠。

如果给浮动元素加了负的边距，把它「推出」父元素，其实很容易出问题。特别是如果你让它向上移太多，可能会跑到上面的内容上面，把之前的东西盖住了。CSS 的规范里说，浏览器不会因为你浮动元素后面改了位置就重新安排前面的内容。所以一旦你把浮动元素往上挤，前面的内容不会让开，这样就会出现元素重叠、内容被遮住的情况。简单来说，用负边距把浮动元素往下挤一般还算安全，但别把它往上推，不然很容易乱套！

浮动元素超出父元素内边缘的另一种方式是浮动元素比父元素更宽。在这种情况下，浮动元素会溢出右或左内边缘（取决于元素浮动的方向），以尽力正确显示自己。

浮动元素与其他内容的层叠关系

当浮动元素因为设置了负外边距等原因，与正常文档流中的其他内容出现重叠时，会有哪些渲染现象？比如，当某个浮动元素向右浮动，同时加了负的左外边距，就很容易与后面的内容发生部分覆盖或交叠。

我们通常已经知道块级元素的边框和背景与浮动元素之间的堆叠关系。那么，行内元素遇到浮动元素时会如何展示呢？

CSS标准在这方面有明确说明：如果行内元素（如 <strong>、<span> 等）与浮动元素发生重叠，无论是它的边框、背景还是文本内容，都会显示在浮动元素之上，也就是说视觉上会“覆盖”浮动元素。而对于块级元素来说，情况稍复杂一些——块级元素的边框和背景会放在浮动元素之下，但它里面的内容（如文字）则依然会显示在浮动元素的上面。下面我们用实例来直观展示上述规则：

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .float-box {
        float: left;
        width: 200px;
        height: 200px;
        margin: 10px -15px 10px 10px

此类元素内容与浮动元素发生的重叠，并不取决于它们在文档中的出现顺序。不管是先写浮动元素，还是先写跟随内容，表现都是一致的。

如何“清除”浮动带来的影响

在深入讨论定位布局之前，我们还需要掌握关于“清除浮动”这一重要知识点。在实际开发中，浮动往往会导致随后的内容环绕在浮动元素两侧，但很多时候我们并不希望出现这种布局效果，因此需要手动阻止内容被浮动元素影响。

举个例子，假如页面按功能划分为多个独立区域，我们通常不希望前面区域的浮动元素影响到后面区域的版式布局。为此，可以在每个新区域的第一个元素上添加特定样式，使其避免与前方的浮动元素并排显示。

此时，如果该区域的头部元素本可能出现在浮动元素旁边，它将自动下移，直到完全位于所有浮动元素的下方，从而保证后续内容都不再受到前方浮动元素的挤占。实现这一机制，主要依赖于 CSS 的 clear 属性。

clear 属性详解

clear 属性为 CSS 提供了控制元素与浮动元素关系的能力，其作用是指定元素的某一侧或两侧是否允许出现浮动元素。该属性可以设置如下取值：

属性值	效果描述
`left`	元素左侧不允许出现浮动元素
`right`	元素右侧不允许出现浮动元素
`both`	元素两侧都不允许出现浮动元素
`inline-start`	根据文字方向，元素起始侧不允许浮动元素
`inline-end`	根据文字方向，元素结束侧不允许浮动元素
`none`	允许浮动元素出现在两侧（默认）

默认情况下，clear 属性的值是 none，表示元素允许浮动元素出现在它两侧。当设置为 clear: left 时，如果元素左侧有浮动元素，该元素就会被向下推，直到位于所有左浮动元素下方。让我们通过一个例子来理解 clear 属性的作用：

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .float-box {
        float: left;
        width: 150px;
        height: 150px;
        margin: 10px;
        background-color: #ccccff;

clear: both

如果我们想要确保元素不会和任何浮动元素出现在同一行，可以使用 clear: both。这个值会同时阻止左边和右边的浮动元素靠近该元素。

如果某个标题只设置了 clear: left，它仍然可能被右边的浮动元素影响。如果我们想要完全避免这种情况，就应该使用 clear: both。

清除浮动的内部机制

clear 属性通过添加清除距离（clearance）来发挥作用。清除距离是在元素顶部边距上方添加的额外空间，用来将元素推到浮动元素下方。这意味着清除元素的顶部边距在清除过程中保持不变。元素的向下移动是由清除距离造成的，而不是边距变化引起的。

在大部分情况下，我们无法预知元素需要被清除多远的距离。要确保清除元素与浮动元素底部之间有合适的间距，最好的方法是给浮动元素本身设置底部边距。这样浮动元素的底部边距会增大浮动盒的尺寸，从而增加清除元素需要跨越的距离。

定位

CSS提供了五种不同的定位方案，我们通过 position 属性来选择使用哪一种。每种定位类型都会改变元素盒子的生成和排列方式。

position 属性的取值

position 属性支持以下五种定位类型：

属性值	定位方式
`static`	静态定位（默认）
`relative`	相对定位
`absolute`	绝对定位
`fixed`	固定定位
`sticky`	粘性定位

static 静态定位

静态定位是 CSS 布局的默认状态。在这种定位方式下，元素依据正常的文档流排序，其位置和尺寸不会受到定位相关属性的影响。块级元素会依次堆叠并生成一个矩形盒，行内元素则在父元素内部自动分行。通常我们无需显式设置 position: static，因为这是所有元素的初始定位方式。

relative 相对定位

采用相对定位（position: relative）时，元素的盒子会参照其自身在普通文档流中的原始位置进行偏移。你可以通过 top、right、bottom、left 等属性对其微调，但元素依然占用原有的文档流空间。换句话说，即使元素视觉上被移动了，页面布局中为它保留的位置并不会改变，这也是相对定位区别于其他定位方案的核心要点。

absolute 绝对定位

当元素设为绝对定位（position: absolute）后，它就会完全脱离标准的文档流，不再占据原有的空间。绝对定位的目标参考点是最近的已定位祖先元素（即设置了除 static 以外 position 的祖先），若找不到，则相对于文档的根元素进行定位。不管原本是什么类型的盒子，被绝对定位的元素都会表现为类似块级容器，可以灵活设置其具体的显示位置。

fixed 固定定位

固定定位（position: fixed）与绝对定位类似，但它的参考点不是父级元素，而是整个浏览器视口。被设置为固定定位的元素始终固定在窗口的某个位置，不会随着页面内容的滚动而移动。这种定位方式常见于头部导航栏、侧边栏或页面悬浮按钮等场景。

sticky 粘性定位

粘性定位（position: sticky）是一种结合了相对和绝对定位特性的现代定位方式。起始阶段，元素在正常流中布局，就像相对定位一样。当滚动到一定阈值时（如距离父级顶部多少像素），元素会脱离正常流并粘在预先设定的位置（通常是父容器的某条边），形成类似“吸附”的效果。当条件不满足时，它又恢复到原始的文档流位置。粘性定位常见于表头、侧边标题等需要在滚动中保持可见的元素。

现在你只需要对各种定位方式有个整体印象，具体细节和使用技巧我们会在后续学习中深入了解。在详细讨论之前，我们重新的来理解一下包含块的概念。

理解包含块

此前我们已经大致了解过包含块这一概念。按照标准文档流结构，最外层的根元素 <html> 充当 <body> 的包含块，而 <body> 则依次作为其子元素的包含块，这种层级关联会一直延续下去。

然而，在涉及元素定位（position）时，包含块的判定方式会发生变化，它具体依赖于元素所采用的定位类型。

包含块与静态、相对定位的关系

对于采用 static（静态）或 relative（相对）定位的普通元素来说，其包含块由其最近的块级祖先、表格单元格或行内块祖先元素的“内容区域”决定。

通俗来说，若元素本身是静态或相对定位，那么它的包含块通常就是“包裹”它的最近那个块级父元素、单元格或行内块元素的内容区。

绝对定位下的包含块选取规则

当元素被设置为 absolute（绝对定位）时，包含块的寻找逻辑会发生跳跃：浏览器会向上查找最近一个已经设定除 static 以外定位（如 relative、absolute、fixed 或 sticky）的祖先元素。这个祖先元素决定了包含块的范围。

如果找到的祖先是块级元素，那么其“内边距边缘”（padding edge）作为包含块的边界。
如果祖先为行内级元素，则以该元素的“内容边缘”（content edge）界定包含块。在文档为自左向右书写时，包含块的上/左边界为祖先第一个盒子的内容区域的顶部、左侧，下/右边界为最后一个盒子的底部、右侧。
倘若没有匹配到任何已定位祖先，包含块则退回使用初始包含块，也就是整个页面文档。

固定定位的包含块规则

使用 fixed（固定定位）的元素，始终以视口（viewport，也就是浏览器窗口）为其包含块。无论页面怎么滚动，其定位参考点都固定不变。这也是实现悬浮按钮、导航栏等常见场景的原理基础。

粘性定位的专属逻辑

粘性定位（sticky）有其独特之处：它会根据包含块的边界自动生成一个名为“粘性约束矩形”的矩形区域，这个区域决定了元素在滚动过程中的粘附触发条件。

需要强调一点：元素完全可以被定位到其包含块（定位上下文）之外的位置。虽然“包含块”这个名词可能更准确地描述为“定位上下文”，但在 CSS 规范和学习中，依然统一称为“包含块”。

偏移属性

我们刚才介绍的四种定位类型（相对、绝对、固定、粘性定位）都需要用特殊的属性来描述元素相对于包含块的偏移位置。这些属性就是偏移属性，它们是定位系统的心脏。

物理偏移属性

CSS提供了四个基本的物理偏移属性：top、right、bottom 和 left。这些属性用来定义元素相对于包含块各个边的偏移距离。

属性	作用
`top`	元素上边缘相对于包含块上边的偏移距离
`right`	元素右边缘相对于包含块右边的偏移距离
`bottom`	元素下边缘相对于包含块下边的偏移距离
`left`	元素左边缘相对于包含块左边的偏移距离

这些属性可以设置长度值、百分比值，或者特殊的 auto 值。默认值都是 auto。

逻辑偏移属性

除了常见的物理偏移属性，CSS 还引入了一套逻辑偏移属性，即 inset-block-start、inset-block-end、inset-inline-start 和 inset-inline-end。这类属性的最大特色在于，它们能根据文本流的主轴与文字书写方向自动调整，无论页面是从左到右、右到左还是上下书写，都能自适应语境，提升了多语言和响应式布局开发的灵活性。

逻辑偏移属性与物理偏移属性（top、bottom、left、right）之间的对应关系由文档的书写模式（如 ltr、rtl、vertical-lr 等）决定。例如在中文等自左向右（LTR）文档内，inset-inline-start 通常等效于 left，inset-inline-end 对应 right；而 inset-block-start 与 top 功能一致，inset-block-end 则相当于 bottom。如果遇到竖排文本或从右到左的语言，对应关系则会随之变化。因此，逻辑偏移属性更适合实现与国际化和排版方向无关的定位需求。

偏移属性的原理

所谓“偏移属性”，本质上指的是定位元素相对于其包含块在某个方向上产生的距离偏移。偏移属性的值既可以是正数、负数，也可以是百分比或 auto。其中，正值通常意味着定位元素的边缘向包含块的中心推进，而负值则可能使其超出包含块边界向外溢出。

以物理属性 top 为例，如果我们设置一个 top: 20px;，表示定位元素的上边距边缘将比包含块的顶部下移 20 像素；如果设为 top: -10px;，则元素实际会被搬到包含块顶部之上 10 像素的位置。同理，left 的正值让元素向右偏移，负值则让元素向左超出。逻辑属性（比如 inset-inline-start）的行为完全一致，只是偏移参考边会动态变化。

值得注意的是，这些偏移始终基于“外边距边缘”(margin edge)来计算，也就是说，如果元素有设置 margin、border 或 padding，这些都包含在偏移计算范围内。当你为元素设定偏移值时，实际上是调整整个盒模型的相应边界。

必须明确区分一点，偏移属性调整的是包含块各侧的距离，并非简单地拉动元素到包含块左上角的某个点。例如，假如你希望一个元素正好填充其包含块的右下角区域，可以这样指定：

|
top: 50%; bottom: 0; left: 50%; right: 0;

这个写法的效果是：元素的左边缘恰好位于包含块宽度的一半位置，右边缘紧贴包含块的右侧。同理，顶部边界在包含块高度一半处，底部则紧贴包含块底部。这种方式充分利用了偏移属性对边界的分别控制能力，可以实现灵活精准的布局效果。让我们通过一个例子来理解这个特性：

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        position: relative;
        width: 400px;
        height: 300px;
        border: 3px solid #333;
        background-color:

本例采用了绝对定位，是因为绝对定位能够最直观、便捷地展示各种偏移属性的实际效果。后续章节我们还会深入讲解绝对定位背后的原理和更多应用场景。

inset 及其相关简写属性

在 CSS 中，除了常用的物理方向偏移属性（如 top、right、bottom、left），还存在一些用于定位的简写属性，能够提高代码的表达效率和可读性。这些属性包括两类逻辑简写（inset-block 和 inset-inline），以及一个物理简写属性（inset）。

inset-block 和 inset-inline 作为逻辑方向的简写属性，可以分别接受一个值或两个值。当只设置一个值时，会同时应用到该方向的起始和结束边缘，比如 inset-block: 10px;，无论块的书写方向如何，顶部和底部都通过 10px 进行偏移。如果同时指定两个值，第一个值代表起始边（如上、左），第二个值代表结束边（如下、右）。例如：inset-inline: 1em 2em; 会分别将内联起始侧和内联结束侧偏移设置为 1em 和 2em。

至于全面控制四个方向的情况，可以采用 inset 物理属性进行简写。inset 实际上是 top、right、bottom、left 四个属性的合并表达。其值的排列顺序为 top、right、bottom、left（简称 TRBL），与 margin、padding 等 CSS 四边简写用法一致。

|
/* 下面两段代码作用完全相同 */
.element {
  top: 25%;
  right: 4em;
  bottom: 25%;
  left: 2em;
}
 
.element {
  inset: 25% 4em 25% 2em;
}

值得注意的是，在使用 inset 进行省略时，遵循 CSS 四边属性简写的规律：若只写两个值，例如 inset: 20px 2em;，则第一个值同时应用于 top 和 bottom，第二个值应用于 right 和 left，相当于 inset: 20px 2em 20px 2em;。

设置宽度和高度

在确定要将元素定位在哪里之后，我们通常希望声明元素应该有多宽和多高。此外，我们可能还希望限制定位元素的高度或宽度。

如果我们想给定位元素一个特定的宽度，可以使用 width 属性。同样，height 属性可以让我们声明定位元素的特定高度。

虽然有时设置定位元素的宽度和高度很重要，但并不总是必要的。例如，如果使用 top、right、bottom 和 left（或使用 inset-block-start、inset-inline-start 等）描述元素四个边的位置，那么元素的高度和宽度会由偏移隐式确定。

假设我们想要一个绝对定位的元素填充其包含块的左半部分，从上到下。我们可以使用这些值：

|
inset: 0 50% 0 0;

由于 width 和 height 的默认值都是 auto，这个结果与使用这些值完全相同：

|
inset: 0 50% 0 0; width: 50%; height: 100%;

在上述示例中，即使我们声明了 width 和 height 属性，它们对该定位元素的实际布局并不会产生任何效果。也就是说，通过偏移量（如 inset 的四边取值）已经确定了元素的范围，这时宽高设定会被忽略。

然而，当我们为元素添加内边距（padding）、边框（border）或外边距（margin）时，显式指定 width 或 height 就变得非常关键。因为在标准盒模型下，内容区域的尺寸由 width 和 height 决定，而内边距和边框会基于这个内容区域叠加。如果想要内部空间（内容区+内边距+边框）正好贴合包含块边界，有几种处理策略：一是可以直接删去或将 width 和 height 赋值为 auto，让浏览器自动计算大小；二是设置 box-sizing: border-box，让元素的整体尺寸包括内容、边框和内边距，便于精确控制边界。

宽高的限制

在实际开发中，常常需要对元素的尺寸进行约束。这时，可以借助最小值和最大值属性来实现灵活的控制。其中，min-width 和 min-height 用于设置元素内容区域可缩小到的最小宽高值；而 max-width 和 max-height 则用于规定元素能扩展的最大尺寸。

顾名思义，这些属性中设置的值都不能为负数。此外，一个显著优势在于：最小值和最大值属性能够很好地搭配不同的单位使用——例如，你可以将宽度基于百分比设置，同时用像素值限制其最大或最小范围，实现响应式布局与定值的结合。

这些尺寸限制属性跟浮动布局配合时同样非常实用。比如，允许一个浮动元素宽度随父元素自适应（用百分比），但又防止它小于某个具体的最小宽度（如10em）；反过来也可以，只要根据实际需求设定不同的 min/max 约束即可。

|
p.aside {
  float: left;
  width: 40em;
  max-width: 40%;
}

这会将浮动设置为40em宽，除非那会超过包含块宽度的40%，在这种情况下，浮动将被限制为该40%的宽度。

绝对定位

在前面的学习里，我们已经通过多个示例详细介绍了绝对定位的多种用法。接下来，我们看看绝对定位在实际应用中背后的机制和一些常见细节。

绝对定位元素与其包含块的关系

当一个元素被设置为绝对定位（即 position: absolute 时），它会彻底脱离正常的文档流。这意味着该元素本身的位置不会影响其它元素的布局，其他元素也不会因为它的存在而发生位置上的变化。此时，这个绝对定位元素会通过诸如 top、left、right、bottom、inset、inset-inline-start 等偏移属性，来确定自己在页面中的精确位置。

一个非常关键的环节在于：绝对定位元素的定位参考点并不是整个页面，而是它的“包含块”。所谓的包含块，指的通常是该元素祖先链中，最近的一个 CSS position 属性值不为 static（即为 relative、absolute、fixed 或 sticky）的元素。开发者常见的做法，是通过给某个父元素设置 position: relative（而不必再指定具体的偏移量），从而让这个父元素成为其绝对定位子元素的包含块。

这样一来，绝对定位元素就能相对于这个意图明确的父级元素进行精确布局，而不会受到整个页面或者其他不相关元素的影响。这对于实现复杂的局部布局需求尤其重要，也是众多 UI 组件库实现弹出框、悬浮层等效果时非常依赖的机制。

|
.contain {
  position: relative;
}

让我们通过一个例子来理解这个概念：

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        margin: 2em;
        border: 2px solid #666;
        padding: 15px;
      }
      
      p.contain {
        position

这两个段落中的 <b> 元素都采用了绝对定位（position: absolute），但它们参考的包含块并不相同。第一个段落里的 <b> 由于其所有祖先元素的 position 均为默认的 static，所以它是以文档的初始包含块为基准来定位。而在第二个段落中，给段落设置了 position: relative，这样它本身就成为子元素的包含块，这意味着 <b> 的定位会以上层段落为参考。

你可能会发现，在第二个段落中，绝对定位的 <b> 会和段落内的部分文本重叠。遇到这种现象，一般只有两个解决思路：要么将 <b> 单独放在段落外部，要么通过调整段落的内边距（padding），为 <b> 预留充足空间。另外，如果 <b> 的背景是透明的，段落的文字内容还会透过这个元素展示。若不想有这种透视效果，就要给 <b> 元素设置不透明背景或者将它完全抽离出文本流。

绝对定位元素与包含块的关系

当一个元素被设为绝对定位后，它也会建立一个新的包含块，供自身后代中若有绝对定位元素使用。比如，我们可以将父级元素绝对定位，然后继续对子元素使用绝对定位，这样子元素会参照父级包含块来定位。

另外要注意，绝对定位的元素会随着页面内容的滚动而移动。除非遇到固定定位（fixed）或粘性定位（sticky）的情况，否则它们总是依附在普通文档流的参考系中。如果想让某元素不随页面滚动，直接相对于浏览器视口进行定位，就要选择position: fixed。

绝对定位元素的定位与尺寸计算

在处理绝对定位元素时，布局规范同时关注“放置位置”和“尺寸”的相互影响。这是因为通过四个偏移属性（top、right、bottom、left）来定位元素时，它们往往会影响盒子的真实宽高。

绝对定位元素的宽与高由其外边距盒（margin box）的定位参数决定——如果包含块的尺寸发生变化，相应地定位元素的尺寸与位置也会调整。给元素添加边距（margin）或内边距（padding），同样会影响其最终布局计算。

加入我们又设置了明确的 width 与 height，并指定了所有偏移属性，那么规范会优先确定其中三项，忽略掉多余的那个，这是因为所有条件同时满足往往并不现实。除非碰巧各项数据正好契合，否则总会有一项被自动调整。

有关 auto 的特殊处理

在进行绝对定位时，CSS 对 auto 值有特殊的处理方式。以 top 为例，如果该属性是 auto，则元素顶部会放在它正常流中原本的位置（即所谓“静态位置”）。而左右（left/right）属性若为 auto，默认会贴齐对应包含块的边界。

这种“自动定位”一般只在其他相关属性没有约束时生效。例如，不限定元素宽度、高度、bottom 或 right 时，auto 能够把元素自然放在其应该出现的位置。

非替换元素的定位与尺寸计算

对于普通的块级非替换元素（像 div、p 等），它们的宽高和具体位置密切依赖包含块。其相关属性（如 width、left、right、margin、padding 等）都会参与最终的布局公式中：

left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right = 包含块宽度

这个公式类似于普通文档流中盒模型的布局规则，只不过绝对定位下会将包含块的宽度分配给更多属性。如果 left、width、right 都为 auto，那么元素的左边会置于其“静态位置”，宽度则是内容自适应，唯有“非静态侧”属性用于填补剩余空间。

如果只有 margin-left 和 margin-right 是 auto，它们被均分，使元素水平居中。如果除了 margin 之外的某个属性为 auto，CSS 便让这个属性去补足布局公式中的差值。

在处理垂直方向（top/bottom/height）时，规则基本如出一辙，只不过把上面的布局公式应用到竖直维度，也可实现垂直居中等布局效果。

还有一点区别：水平方向 auto 值可以放在 left、right，但垂直方向只有 top 采用 "静态位置" 方法；bottom 无论如何不做静态定位。如果高度布局被约束过严，bottom 的设置可能会被忽略，而 top 一般不会被忽略。

替换元素（如图片）的定位与尺寸

对于替换元素（比如 img、video）等自带固有宽高的标签，定位规程略有不同。由于这些元素本身自带尺寸，未特殊声明时不会“缩小包裹”内容。主要逻辑如下：

若 width 是 auto，使用其固有宽度；若指定宽度，则直接应用此数值。
左右（left/right）如果是 auto，先尝试用对应的“静态位置”替换，如果还剩 auto，再把 auto margin 替换为 0。
如果 margin-left 和 margin-right 都是 auto，同样会将元素居中。
最后如果还有 1 个 auto，那 CSS 会根据包含块尺寸自动分配，把剩下的空间全部留给最后那个属性。
如果出现布局冲突（参数约束过严），用户代理将忽略内联结束侧属性（LTR 里是 right，RTL 里是 left）。

垂直方向高度的计算同理：固有高度、显式 height、top/bottom auto 的解法基本一致。遇到冲突时，bottom 值可能会被忽略。总之，替换元素和非替换元素在绝对定位下的定位与尺寸处理方式高度类似，最大差别在于“固有尺寸”是否起作用。

z-index

在实际布局过程中，元素发生定位时难免出现重叠现象。此时，我们需要通过 z-index 属性来决定哪个元素位于上层展示、哪个元素处于下层遮盖。z-index 就是用来控制元素前后堆叠的优先级。

z-index 的命名源自三维坐标系概念：x 轴代表左右，y 轴代表上下，而 z 轴表示深度，即元素距离屏幕的远近。通过调整 z 轴上的位置，我们就可以让不同的元素呈现出前后覆盖关系。

z-index 属性解析

在 CSS 中，z-index 可以设置为任意整数值，或者是默认的 auto。其值越大，元素就越靠近用户，显示层级越高；反之，值越小则越远离用户，展示在更低的栈层。需要注意的是，z-index 允许为负数，这样设置会让元素“后退”到更底层显示。

实际开发时，z-index 并不要求设置连续递增。你可以自由分配数值。如果希望某个关键元素绝对处于最顶层，可以赋予极大的 z-index，例如 z-index: 100000。但如果有更大的 z-index，元素依然可能被覆盖，所以分配时需要兼顾页面其它元素分层。

想象一下，有多个段落相互重叠，默认情况下，后面的元素会覆盖前面的。但通过显式设置各自的 z-index，可以任意改变它们的栈顺序，实现灵活自定义的视觉层次。

层叠上下文的机制

当某个定位元素设置了具体的 z-index（只要不是 auto），它就会生成独立的层叠上下文（stacking context）。这个局部的层叠环境决定了其所有子元素的前后关系。也就是说，子元素的 z-index 仅在它所属的上下文中有效，不会越级和父级“抢位置”。

层叠上下文有一些重要特点：在同一个上下文里，子元素绝对不可能渲染在它的父元素之下。不论子元素 z-index 取负还是取正，它们都“困”在自身的分组范围内。比如，一个子元素即使设为 z-index: -343，在外部也不会遮挡其父元素，因为栈层级的判断仅在当前上下文内进行，而不会影响外部兄弟元素。

此外，如果 z-index 为 auto，那么该元素不会新建一个层叠上下文，而是直接继承父级的堆叠层级。在当前上下文中，这种情况下可以认为其堆叠层级为 0。只有根元素会始终拥有自己的全局层叠上下文。

所以，z-index: auto 和 z-index: 0 在多数层叠关系下等效，但不具备开启新的局部上下文的能力。

需要注意的是，在 Flexbox 和 Grid 布局环境下，即使没有对子项显式设置 position，z-index 属性依旧会生效，元素仍然遵循相同的堆叠规则。

固定定位

固定定位（fixed positioning）本质上和绝对定位有诸多相似之处，关键区别在于其参考的包含块不同。对于 fixed 元素来说，其参考对象直接是浏览器视口（viewport），而非最近的定位祖先元素。这样，固定定位元素会永远固守于视口的某个位置，即便页面滚动，位置也不会发生变化。

固定定位为界面布局带来极大便利，尤其适用于实现导航栏、页眉、侧边栏等始终可见的区域。比如让顶部菜单栏、侧栏不因页面滚动而丢失可见性，极大提升用户体验。

除此之外，fixed 还常被用于实现“常驻显示”的内容。例如把一个跳转按钮、工具浮窗或底部版权条带固定在页面某一位置，无论页面多长、怎么滚动，这些元素始终不会离开用户视野。

|
footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}

这样页脚就会固定在视口底部，无论页面内容如何滚动，都保持在原位。

固定定位的很多布局需求，现在也可以通过网格布局来实现，而且往往效果更好。

相对定位

相对定位是 CSS 布局体系中最基础、最直观的一种定位方式。其核心原理在于：元素依然保留在文档流中的原有位置，但通过 top、left、right 和 bottom 这些偏移属性，进行相较于自身原始位置的位移。需要注意的是，元素虽然视觉上被“移动”了，但它原本在页面中所占的空间并没有被移除，因此不会影响其他兄弟元素的布局。

举一个具体例子，比如我们希望将一张图片向上、向左各偏移20像素，只需设置 top: -20px; left: -20px。此时图片会整体上移、左移，但它在页面上原有的占位区域依旧留在原处。这与绝对定位或浮动脱离文档流的行为截然不同。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .box {
        width: 200px;
        height: 200px;
        background-color: #ffcccc;
        border: 2px solid #ff0000;
        margin: 20

此外，运用相对定位还能为子元素创建一个新的定位上下文（也称"包含块"）。当父元素被赋予 position: relative 后，其绝对定位（position: absolute）的子元素便会以该父级为参考进行定位。这一机制极大增强了布局的灵活性和可控性。

值得一提的是，CSS 规范对相对定位的“重叠约束”也有明确规定。当同时为一个元素设置了相互矛盾的偏移值（比如同时指定 top 和 bottom），浏览器会采用一种“自动反向抵消”的策略。例如定义了 top: 10px; bottom: 20px;，实际上 bottom 会被取为 -top，最终实际效果等价于 top: 10px; bottom: -10px;，元素只会按照 top 决定的方向偏移10像素。

书写方向的不同（如从左到右/从右到左）也会影响偏移属性的解析方式：在从左到右（LTR）的书写环境下，right 默认为 -left；而从右到左（RTL）时，left 默认为 -right，这一点在多语言网页布局时尤为重要。

相对定位实现元素移动的视觉效果，与 CSS3 的 transform 变换下的 translate 很接近，但本质机制和局限性略有不同，二者不可完全等同。

粘性定位

粘性定位（Sticky Positioning）是 CSS 新增的一种特殊定位模式，常见于滚动页面的头部导航、目录索引等场景。当用户滚动页面时，指定元素可以在滚动到特定位置后“粘住”视口的一侧，实现既随内容滚动又能在特定时机固定的效果。

实现粘性定位，只需将元素的 position 属性设为 sticky，并结合如 top、left、right、bottom 等偏移值。例如 position: sticky; top: 2em; 表示元素会在距离包含块顶部2em的位置开始"粘住"。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        height: 200px;
        overflow: auto;
        border: 2px solid #333;
        padding: 10px;
      }
 
      .sticky-header

粘性元素初始时仍处于常规文档流，与普通块级元素行为一致。当页面滚动时，一旦该元素的边缘到达所设定的偏移位置（比如 top: 0），它会脱离常规流，开始固定在包含块的相对位置上。但值得注意的是，粘性元素即便进入"吸附"状态，原有的文档空间依然被保留，不会导致内容跳变或塌陷。

关于包含块（containing block）的判定，除了拥有 position: relative/absolute/fixed 的父元素外，设置了 overflow: scroll、auto 或 hidden 的祖先元素，同样可以成为粘性定位的参照边界。因此，进行粘性布局设计时应关注外层滚动容器的定义。

若用户反向滚动页面，使粘性元素重新回到未“吸附”的位置，元素会自动恢复为自然流布局。这一动态切换过程用户几乎无感，但能显著提升页面的可用性和体验。

另外，一旦对元素设定了多个偏移属性（如同时指定 top 和 bottom，且不为 auto），这些边均会成为触发粘性状态的参照点，可以实现元素在滚动容器中始终处于可见范围的高级布局需求。

在实际页面中，同一滚动容器内的多个粘性元素发生堆叠时，其叠放顺序默认遵循 DOM 源码顺序，后定义的元素会覆盖在前面的上方。如果需要自定义前后层级，可通过 z-index 属性精确控制每个粘性元素的堆叠优先级。

小结

通过本部分的学习，我们掌握了CSS布局的两个重要工具：浮动和定位。浮动虽然看起来简单，但功能强大，能够让内容围绕特定元素排列，在现代CSS中仍然有其独特价值。

定位系统让我们能够以常规文档流无法实现的方式移动元素。结合z轴的层叠控制和各种溢出模式，定位在flexbox和grid布局盛行的今天仍然非常实用。

掌握这些基础知识，我们就能更好地控制网页元素的排列和布局效果。

实战演练

练习题1：浮动属性值

以下哪些是 float 属性的有效取值？（多选）

A. left
B. center
C. right
D. inline-start
E. block

答案：A, C, D

解析：

left：让元素向左浮动 ✓
center：不是有效的float取值 ✗
right：让元素向右浮动 ✓
inline-start：根据文字书写方向让元素向行首浮动 ✓
block：不是有效的float取值 ✗

练习题2：定位类型判断

判断以下说法是否正确：

静态定位（static）是CSS的默认定位方式
绝对定位的元素会脱离文档流
相对定位的元素会保留在文档流中的原有位置
固定定位的参考点是浏览器视口

答案：

✓ 正确 - 静态定位是所有元素的默认定位方式
✓ 正确 - 绝对定位元素完全脱离正常的文档流
✓ 正确 - 相对定位元素仍然占用原有的文档流空间
✓ 正确 - 固定定位始终相对于浏览器视口进行定位

练习题3：偏移属性填空

请填写以下CSS代码中缺失的偏移属性，使元素位于包含块的右下角：

|
.element {
  position: absolute;
  top: 50%;
  ____: 0;
  ____: 0;
  ____: 50%;
}

答案：

|
.element {
  position: absolute;
  top: 50%;
  right: 0;
  bottom: 0;
  left: 50%;
}

解析：这会让元素填充包含块右下角的区域。top: 50% 和 left: 50% 确定了元素的左上角位置，right: 0 和 bottom: 0 确定了右下角位置。

练习题4：清除浮动

当一个浮动元素的高度超过其父容器时，会发生什么现象？如何解决这个问题？

答案：

现象： 浮动元素会从父容器的底部"伸出来"，父容器的背景色等样式不会包含浮动元素。

解决方案：

给父容器也设置浮动：float: left; 或 float: right;
使用clearfix技术（在父容器后添加清除元素）
给父容器设置 overflow: hidden; 或 overflow: auto;

解析：浮动规则只约束左、右、上三个方向的边界，对底部没有限制。绝对定位的父容器可以包含其浮动子元素。

练习题5：包含块选择

对于以下HTML结构，绝对定位的 <div class="child"> 的包含块是什么？

|
<div class="grandparent">
  <div class="parent">
    <div class="child" style="position: absolute;"></div>
  </div>
</div>

假设只有 .child 设置了 position: absolute，其他元素都没有设置定位。

答案： 初始包含块（整个文档的根元素）

解析：绝对定位元素的包含块是最近的已定位祖先元素（position不为static）。在这个例子中，所有祖先元素都是静态定位，所以包含块是整个文档的初始包含块。

练习题6：z-index层叠

以下哪个说法关于 z-index 是正确的？

A. z-index 只能用于绝对定位元素
B. 负值会让元素显示在更底层
C. z-index: auto 会创建一个新的层叠上下文
D. 子元素的z-index可以超过父元素的z-index

答案：B

解析：

A. 错误：z-index也可以用于相对定位、固定定位、粘性定位元素
B. 正确：z-index的负值会让元素显示在更低的层级
C. 错误：z-index: auto 不会创建新的层叠上下文
D. 错误：子元素的z-index只在父元素的层叠上下文中有效，不能超过父元素的层级

练习题7：定位类型应用

以下场景适合使用哪种定位方式？

创建一个始终固定在页面顶部的导航栏
让一个元素相对于其正常位置稍微偏移，但不影响其他元素布局
创建一个相对于父容器定位的弹出框
让表格头部在滚动时保持可见

答案：

固定定位（fixed） - position: fixed; top: 0; 让元素相对于视口固定
相对定位（relative） - position: relative; 元素仍占用原有空间，只改变视觉位置
绝对定位（absolute） - position: absolute; 相对于最近的定位祖先元素定位
粘性定位（sticky） - position: sticky; top: 0; 元素在滚动到指定位置时"粘住"

解析：这些都是各种定位类型的典型应用场景。

练习题8：浮动排列规则

根据浮动的九条排列规则，以下哪个说法是正确的？

A. 浮动元素可以超出其包含块的顶部边界
B. 左浮动元素必须位于所有前面出现的左浮动元素的右边
C. 浮动元素不能向上飘浮超过当前行框的顶部
D. 浮动元素应该尽量放在尽可能低的位置

答案：C

解析：

A. 错误：第四条规则规定浮动元素的顶部不能超过其父元素的内顶部边界
B. 错误：第二条规则说的是右边缘不能超过前面元素的右边缘
C. 正确：第六条规则明确规定了这个限制
D. 错误：第八条规则说的是尽量放在最高位置