2025-09-05 CSS4——浮动与定位

文章目录

  • [1 显示(Display)](#1 显示(Display))
    • [1.1 visibility:hidden](#1.1 visibility:hidden)
    • [1.2 display:none](#1.2 display:none)
  • [2 块和内联元素](#2 块和内联元素)
    • [2.1 块元素](#2.1 块元素)
    • [2.2 内联元素](#2.2 内联元素)
    • [2.3 改变元素的显示方式](#2.3 改变元素的显示方式)
  • [3 浮动(Float)](#3 浮动(Float))
    • [3.1 `float` 属性](#3.1 float 属性)
    • [3.2 `clear` 属性](#3.2 clear 属性)
  • [4 定位(Position)](#4 定位(Position))
    • [4.1 五种定位模式](#4.1 五种定位模式)
      • [4.1.1 `static`](#4.1.1 static)
      • [4.1.2 `relative`](#4.1.2 relative)
      • [4.1.3 `absolute`](#4.1.3 absolute)
      • [4.1.4 `fixed`](#4.1.4 fixed)
      • [4.1.5 `sticky`](#4.1.5 sticky)
    • [4.2 `z-index`](#4.2 z-index)
    • [4.3 CSS 定位属性一览](#4.3 CSS 定位属性一览)
  • [5 溢出(Overflow)](#5 溢出(Overflow))

1 显示(Display)

在 CSS 中,Display 和 Visibility 是两个与元素显示状态相关的重要属性。

  • Display 属性:用于设置一个元素应如何显示。

  • Visibility 属性:用于指定一个元素应可见还是隐藏。

隐藏一个元素主要有两种方法,分别是将 display 属性设置为 "none",以及将 visibility 属性设置为 "hidden",但它们会产生不同的结果。

1.1 visibility:hidden

当把元素的 visibility 属性设置为 "hidden" 时,该元素会被隐藏,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然看不见了,但仍然会对页面的布局产生影响。

实例:

css 复制代码
h1.hidden {visibility:hidden;}

1.2 display:none

当把元素的 display 属性设置为 "none" 时,该元素会被隐藏,并且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。

实例:

css 复制代码
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 标准。

将列表项显示为内联元素

css 复制代码
li {display:inline;}

通过这样的设置,原本作为块元素、会换行显示的列表项,将变成内联元素,在同一行显示。

将 span 元素作为块元素

css 复制代码
span {display:block;}

原本作为内联元素的 span,设置后会变成块元素,占用全部宽度,前后有换行符。

3 浮动(Float)

想象一下 Word 或 Google Docs 里的"文字环绕图片"功能。当你设置一张图片环绕时,图片会靠在页面的左边或右边,而文字会自动围绕在它的周围。

CSS 的 float 属性做的就是类似的事情。

  • 核心作用 :让一个元素(比如一张图片或一个 <div> 块)脱离正常的文档流,像船一样"浮"起来,然后向左或向右移动。
  • 移动方向float 只能让元素进行水平方向(左或右)的移动,不能上下移动。
  • 移动规则:浮动元素会一直向指定方向移动,直到碰到其父容器的边界,或者碰到另一个已经浮动的元素。
  • 对周围元素的影响
    • 在浮动元素之后的元素,会识别到浮动元素的存在,并围绕它进行重新排列(这就是"文字环绕"效果的来源)。
    • 在浮动元素之前的元素,则完全不受影响。

3.1 float 属性

使用起来非常简单,基本语法就是 selector { float: value; }

float 有以下几个值:

  • left: 元素向左浮动。
  • right: 元素向右浮动。
  • none: 默认值,元素不浮动,老老实实待在原来的位置。

以下 float 的经典应用。我们想让一张图片靠右显示,文字在它的左边环绕。

html 复制代码
<!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: 默认值,允许两侧有浮动元素。

如果我们想在图片廊下方添加一行文字,并且不希望这行文字"挤"到图片廊的右边,就需要清除浮动。

html 复制代码
<!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 除外),你就可以使用 toprightbottomleft 这四个"坐标"属性来精确地移动它。如果 position 是默认的 static,这四个坐标属性是无效的。

position 属性有五个可选值,我们来逐一解析。

4.1 五种定位模式

4.1.1 static

这是每个 HTML 元素的默认值

  • 行为描述:元素遵循正常的文档流,就像你什么都没设置一样。它不会被特殊定位。
  • 坐标属性top, right, bottom, left 对它完全无效
  • 用途:通常用于取消已经设置的定位,让元素恢复到默认的文档流状态。
html 复制代码
<!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 定位元素的"容器"或"锚点"。
html 复制代码
<!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> 元素(也就是整个浏览器页面)进行定位。
  • 空间占用 :元素会完全脱离文档流,不再占据任何空间。它会像浮起来一样,可以覆盖在其他元素之上。
  • 用途:常用于需要精确放置在页面某个位置的元素,如弹窗、图标、自定义下拉菜单等。
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 一样,元素会完全脱离文档流,不占据空间。
  • 用途:非常适合制作固定在顶部的导航栏、侧边栏、返回顶部按钮或广告弹窗。
html 复制代码
<!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

这是 relativefixed 的混合体,非常智能。

  • 行为描述 :元素在正常情况下表现得像 position: relative,会随着页面滚动。但当它滚动到你设定的阈值位置(由 top, right, bottom, left 之一指定)时,它就会"粘"在那里,表现得像 position: fixed
  • 生效条件 :必须至少指定 top, right, bottom, left 中的一个,sticky 才会生效。
  • 浏览器兼容性 :需要注意,老版本的浏览器(如 IE)可能不支持。在 Safari 中可能需要添加 -webkit- 前缀。
html 复制代码
<!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, 意思是内容溢出元素框:

html 复制代码
<!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>
相关推荐
上位机付工4 小时前
上位机通信速度有多快?
开发语言·c#·上位机·plc
给我个面子中不4 小时前
JUC、JVM八股补充
java·开发语言·jvm
hqxstudying5 小时前
Kafka 深入研究:从架构革新到性能优化的全面解析
java·开发语言·微服务·kafka·springcloud
浊浪载清辉5 小时前
《Html泛型魔法学院:用霍格沃茨风格网页教授集合框架》
前端·javascript·学习·html
Want5955 小时前
HTML元素周期表
前端·html
一只一只妖8 小时前
突发奇想,还未实践,在Vben5的Antd模式下,将表单从「JS 配置化」改写成「模板可视化」形式(豆包版)
前端·javascript·vue.js
悟能不能悟11 小时前
js闭包问题
开发语言·前端·javascript
秋秋_瑶瑶11 小时前
vue-amap组件呈现的效果图如何截图
前端·javascript·vue-amap
潼心1412o11 小时前
C语言(长期更新)第15讲 指针详解(五):习题实战
c语言·开发语言