当前位置： 首页 > news >正文

css3浮动定位

news 2026/2/9 13:47:36

css3浮动定位

  • 前言
  • 浮动float的基本概念
    • 浮动的使用
    • 浮动的顺序贴靠特性
    • 浮动的元素一定能设置宽高
  • 使用浮动实现网页布局
  • BFC规范和浏览器差异
    • 如何创建BFC
    • BFC的其他作用
    • 浏览器差异
  • 清除浮动
  • 相对定位 relative
  • 绝对定位 absolute
    • 绝对定位脱离标准文档流
    • 绝对定位的参考盒子
    • 绝对定位的盒子垂直居中
    • 堆叠顺序z-index属性
    • 绝对定位的用途
  • 固定定位 fixed
    • 固定定位的常用用途
      • 返回顶部
      • 楼层导航
  • 结语

前言

在网页设计的舞台上，我们常常需要元素自由灵活地漂浮在页面上，为用户呈现更富有动感的视觉体验。CSS3的浮动定位技术，就像一场舞蹈，可以让元素轻盈地在页面上舞动。本文将带你进入这个富有创意的领域，解锁浮动定位的神奇之处。

浮动float的基本概念

最本质的功能：用来实现并排

浮动的使用

要浮动，并排的盒子都要设置浮动

父盒子要有足够的宽度，否则子盒子会掉下去

浮动的顺序贴靠特性

子盒子会按照顺序进行贴靠，如果没有足够空间，则会寻找再前一个兄弟元素

浮动的元素一定能设置宽高

浮动的元素不再区分块级元素、行内元素，已经脱离了标准文档流，一律能够设置宽度和高度，即使它是span或者a标签等

使用浮动实现网页布局

注意事项

  • 垂直显示的盒子，不要设置浮动，只有并排显示的盒子才要设置浮动！
  • 大盒子带着小盒子跑，一个大盒子中，又是一个小天地，内部可以继续使用浮动
  • div是免费的，不要节约盒子

BFC规范和浏览器差异

BFC (Box Formatting Context，块级格式化上下文) 是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

  • 一个盒子不设置height，当内容子元素都浮动时，无法撑起自身
  • 这个盒子没有形成BFC

如何创建BFC

  • 方法1: float的值不是none
  • 方法2: position的值不是static或者relative
  • 方法3: display的值是inline-block、flex或者inline-flex
  • 方法4: overflow:hidden (表示溢出隐藏，溢出盒子边框的内容将会被隐藏)，这个是非常好用的让盒子形成BFC的方法

BFC的其他作用

  • BFC可以取消盒子margin塌陷
  • BFC可以阻止元素被浮动元素覆盖

浏览器差异

  • IE6、7浏览器使用haslayout机制，和BFC规范略有差异比如IE浏览器可以使用zoom:1属性“让盒子拥有layout’
  • 如果要制作兼容到IE6、7的网页时，尽量让网页布局变得简单，内部有浮动的盒子要设置height属性，规范编程，不要“玩杂技”

清除浮动

  • 方法一：让内部有浮动的父盒子形成BFC，它就能关闭住内部的浮动。此时最好的方法就是overflow:hidden属性
  • 方法二：给后面的父盒子设置clear:both属性clear表示清除浮动对自己的影响，both表示左右浮动都清除
  • 方法三：使用::after伪元素给盒子添加最后一个子元素，并且给::after设置clear:both
  • 方法四：在两个父盒子之间“隔墙”，隔一个携带clear:both的盒子

相对定位 relative

相对定位：盒子可以相对自己原来的位置进行位置调整，称为相对定位

位置描述词：

  • left 向右移动
  • right 向左移动
  • top 向下移动
  • bottom 向上移动

相对定位的性质：相对定位的元素，会在“老家留坑”本质上仍然是在原来的位置，只不过渲染在新的地方而已，渲染的图形可以比喻成“影子”，不会对页面其他元素产生任何影响

相对定位的用途：

  • 相对定位用来微调元素位置
  • 相对定位的元素，可以当做绝对定位的参考盒子

绝对定位 absolute

绝对定位：盒子可以在浏览器中以坐标进行位置精准描述拥有自己的绝对位置

位置描述词：

  • left 向右移动
  • right 向左移动
  • top 向下移动
  • bottom 向上移动

绝对定位脱离标准文档流

  • 绝对定位的元素脱离标准文档流，将释放自己的位置，对其他元素不会产生任何千扰，而是对它们进行压盖
  • 脱离标准文档流的方法:浮动、绝对定位、固定定位

绝对定位的参考盒子

  • 绝对定位的盒子并不是永远以浏览器作为基准点
  • 绝对定位的盒子会以自己祖先元素中，离自己最近的拥有定位属性的盒子，当做基准点。这个盒子通常是相对定位的，所以这个性质也叫做“子绝父相”

绝对定位的盒子垂直居中

绝对定位的盒子垂直居中是一个非常实用的技术

position：absolute;
top:50%;
margin-top:  -自己高度一半

堆叠顺序z-index属性

z-index属性是一个没有单位的正整数，数值大的能够压住数值小的

绝对定位的用途

  • 绝对定位用来制作“压盖”、“遮罩”效果
  • 绝对定位用来结合CSS精灵使用
  • 绝对定位可以结合js实现动画

固定定位 fixed

不管页面如何卷动，它永远固定在那里

position:fixed;
top:100px;
left:100px;

注意事项：

  • 固定定位只能以页面为参考点，没有子固父相这个性质
  • 固定定位脱离标准文档流

固定定位的常用用途

返回顶部

固定定位（position: fixed;）常常用于创建返回顶部按钮，这样用户可以轻松返回网页顶部。以下是一个简单的 HTML 和 CSS 示例，演示如何创建一个返回顶部按钮：

HTML 结构：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="styles.css"><title>Scroll to Top Example</title>
</head>
<body><div class="content"><!-- 页面内容 --><h1>Scroll down to see the button</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p></div><!-- 返回顶部按钮 --><div class="scroll-to-top"><a href="#" id="scrollToTopButton">&#9650; Top</a></div><script src="script.js"></script>
</body>
</html>

CSS 样式（styles.css）：

body {margin: 0;padding: 0;font-family: Arial, sans-serif;
}.content {height: 1000px; /* 为了演示滚动效果而设置的高度 */padding: 20px;
}.scroll-to-top {position: fixed;bottom: 20px;right: 20px;background-color: #007bff;color: #fff;padding: 10px;border-radius: 5px;cursor: pointer;
}#scrollToTopButton {text-decoration: none;color: #fff;
}

JavaScript 脚本（script.js）：

document.addEventListener("DOMContentLoaded", function () {// 获取返回顶部按钮var scrollToTopButton = document.getElementById("scrollToTopButton");// 添加点击事件监听器scrollToTopButton.addEventListener("click", function (event) {event.preventDefault(); // 阻止默认行为// 平滑滚动到页面顶部window.scrollTo({top: 0,behavior: "smooth"});});// 监听页面滚动事件window.addEventListener("scroll", function () {// 如果页面滚动超过一定高度，显示返回顶部按钮；否则隐藏if (window.scrollY > 200) {scrollToTopButton.style.display = "block";} else {scrollToTopButton.style.display = "none";}});
});

这个示例中，.scroll-to-top 类定义了返回顶部按钮的样式，其中 position: fixed; 使按钮在页面滚动时保持固定在右下角。JavaScript 部分监听页面滚动事件，当滚动高度超过一定值时显示按钮，否则隐藏。点击按钮时，通过 JavaScript 使用平滑滚动效果返回页面顶部。

楼层导航

固定定位 (position: fixed;) 也常被用于创建楼层导航，使用户能够方便地导航到页面的不同部分。以下是一个简单的 HTML 和 CSS 示例，演示如何创建一个楼层导航：

HTML 结构：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="styles.css"><title>Floor Navigation Example</title>
</head>
<body><div id="section1" class="section"><h2>Section 1</h2><p>This is the content of Section 1.</p></div><div id="section2" class="section"><h2>Section 2</h2><p>This is the content of Section 2.</p></div><div id="section3" class="section"><h2>Section 3</h2><p>This is the content of Section 3.</p></div><!-- 楼层导航 --><div class="floor-navigation"><ul><li><a href="#section1">Section 1</a></li><li><a href="#section2">Section 2</a></li><li><a href="#section3">Section 3</a></li></ul></div></body>
</html>

CSS 样式（styles.css）：

body {margin: 0;padding: 0;font-family: Arial, sans-serif;
}.section {height: 500px;padding: 20px;
}.floor-navigation {position: fixed;top: 50%;right: 20px;transform: translateY(-50%);background-color: #007bff;color: #fff;padding: 10px;border-radius: 5px;
}.floor-navigation ul {list-style: none;padding: 0;
}.floor-navigation li {margin-bottom: 10px;
}.floor-navigation a {text-decoration: none;color: #fff;display: block;padding: 5px;border-radius: 3px;
}.floor-navigation a:hover {background-color: #0056b3;
}

在这个示例中，.floor-navigation 类定义了楼层导航的样式，其中 position: fixed; 使其固定在页面的右侧。导航链接通过锚点 href 属性与各个部分的 ID 相关联，点击链接时页面会平滑滚动到相应的部分。楼层导航的位置通过 top 和 right 属性进行调整，使其在页面右侧居中显示，并通过 transform 属性进行垂直居中。:hover 伪类用于提供链接的悬停样式。

结语

浮动定位不仅仅是页面布局的一种方式，更是一门艺术。通过本文的学习，你将更加熟练地运用CSS3中的浮动定位，为你的网页注入更多生机和灵活性。让我们一同跳入这场浮动的舞蹈，创造出引人入胜的用户体验。

相关文章：

css3浮动定位

css3浮动定位 前言浮动float的基本概念浮动的使用浮动的顺序贴靠特性浮动的元素一定能设置宽高 使用浮动实现网页布局BFC规范和浏览器差异如何创建BFCBFC的其他作用浏览器差异 清除浮动相对定位 relative绝对定位 absolute绝对定位脱离标准文档流绝对定位的参考盒子绝对定位的盒…...

编程日记 2024/1/11 9:11:06

Linux 上 Nginx 配置访问 web 服务器及配置 https 访问配置过程记录

目录 一、前言说明二、配置思路三、开始修改配置四、结尾 一、前言说明 最近自己搭建了个 Blog 网站&#xff0c;想把网站部署到服务器上面&#xff0c;本文记录一下搭建过程中 Nginx 配置请求转发的过程。 二、配置思路 web项目已经在服务器上面运行起来了&#xff0c;运行的端…...

编程日记 2024/1/11 9:08:04

css less sass 动态宽高

less height: ~"calc(100% - 30px)";若要需要按照某个比例固定高度可以用 min-height: e("calc(100vh - 184px)")css height: calc(100% - 50px);sass height:calc(100% - var(--height) );...

编程日记 2024/1/11 9:07:02

sqlserver导出数据为excel再导入到另一个数据库

要将SQL Server中的数据导出为Excel文件&#xff0c;然后再将该Excel文件导入到另一个数据库中&#xff0c;你可以按照以下步骤进行操作&#xff1a; 导出数据为Excel文件 echo offset SourceServer源服务器名称 set SourceDB数据库名称 set ExcelFilePath导出到的Excel文件路…...

编程日记 2024/1/11 9:06:01

异构微服务远程调用如何打jar包

1.服务提供方打 jar 包 RemoteUserService.java package com.finance.system.api;import com.finance.system.api.domain.dto.Enterprise; import org.springframework.cloud.openfeign.FeignClient; import org.springframework.stereotype.Component; import org.springfra…...

编程日记 2024/1/11 9:01:58

赋能智慧农业生产，基于YOLOv7开发构建农业生产场景下油茶作物成熟检测识别系统

AI赋能生产生活场景&#xff0c;是加速人工智能技术落地的有利途径&#xff0c;在前文很多具体的业务场景中我们也从实验的角度来尝试性地分析实践了基于AI模型来助力生产生活制造相关的各个领域&#xff0c;诸如&#xff1a;基于AI硬件实现农业作物除草就是一个比较熟知的场景…...

编程日记 2024/1/11 8:57:52

Docker入门介绍

【一】从 dotCloud 到 Docker——低调奢华有内涵 1、追根溯源:dotCloud 时间倒回到两年前&#xff0c;有一个名不见经传的小公司&#xff0c;他的名字叫做:dotCloud。 dotCloud 公司主要提供的是基于 PaaS(Platform as a Service&#xff0c;平台及服务) 平台为开发者或开发商…...

编程日记 2024/1/11 8:52:48

第四站:指针的进阶-(二级指针,函数指针)

目录 二级指针 二级指针的用途 多级指针的定义和使用 指针和数组之间的关系 存储指针的数组(指针数组:保存地址值) 指向数组的指针(数组指针) 传参的形式(指针) 数组传参时会退化为指针 void类型的指针 函数指针 定义: 调用:两种方式:(*指针名)(参数地址) 或者 指针…...

编程日记 2024/1/11 8:51:47

浏览器渲染原理（面试重点）

一、浏览器是如何渲染页面的 常见的简洁答案&#xff1a; 浏览器内核拿到内容后&#xff0c;渲染流程大致如下&#xff1a;解析HTML&#xff0c;构建Dom树&#xff1b;解析CSS&#xff0c;构建Render树&#xff1b;&#xff08;将CSS代码解析成树形的数据结构&#xff0c;与D…...

编程日记 2024/1/11 8:50:46

C //练习 5-3 用指针方式实现第2章中的函数strcat。函数strcat(s, t)将t指向的字符串复制到s指向的字符串的尾部。

C程序设计语言 &#xff08;第二版&#xff09; 练习 5-3 练习 5-3 用指针方式实现第2章中的函数strcat。函数strcat(s, t)将t指向的字符串复制到s指向的字符串的尾部。 注意&#xff1a;代码在win32控制台运行&#xff0c;在不同的IDE环境下&#xff0c;有部分可能需要变更。…...

编程日记 2024/1/11 8:48:45

深度剖析Redis：从基础到高级应用

目录 引言 1、 Redis基础 1.1 Redis数据结构 1.1.1 字符串&#xff08;String&#xff09; 1.1.2 列表&#xff08;List&#xff09; 1.1.3 集合&#xff08;Set&#xff09; 1.1.4 散列&#xff08;Hash&#xff09; 1.1.5 有序集合&#xff08;Sorted Set&#xff09;…...

编程日记 2024/1/11 8:46:43

视频监控录像服务器（中心录像服务器）功能详细介绍

目 录 一、概述 &#xff08;一&#xff09;定义 &#xff08;二&#xff09;视频监控中心录像服务器 二、存储策略服务 &#xff08;一&#xff09;存储策略配置 1、 录入页面 2、 选择需要进行录像的视频 3、批量选择多个通道号 4、其他关键参数…...

编程日记 2024/1/11 8:45:43

SouthernBiotech抗荧光淬灭封片剂

荧光淬灭又称荧光熄灭或萃灭&#xff0c;是指导致特定物质的荧光强度和寿命减少的所有现象。引起荧光淬灭的物质称为荧光淬灭剂。SouthernBiotech专门开发的Fluoromount-G系列荧光封片剂是以甘油为基础&#xff0c;加入抗荧光淬灭剂&#xff0c;可明显降低荧光淬灭现象&#xf…...

编程日记 2024/1/11 8:42:40

[Excel]如何找到非固定空白格數列的條件數據? 以月份報價表單為例

在群組中看到上述問題&#xff0c;研判應是一份隨月份變動的產品報價表單&#xff0c;空白欄可能表示該月份價格與上個月份一致。這個問題是需要取得最近一次單價和倒數第二次單價&#xff0c;常用且實務的excel案例值得紀錄。 最近一次單價: INDEX($B2:$G2,1,LARGE(IF(ISBLAN…...

编程日记 2024/1/11 8:39:37

TypeScript进阶（二）深入理解装饰器

✨ 专栏介绍 TypeScript是一种由微软开发的开源编程语言&#xff0c;它是JavaScript的超集&#xff0c;意味着任何有效的JavaScript代码都是有效的TypeScript代码。TypeScript通过添加静态类型和其他特性来增强JavaScript&#xff0c;使其更适合大型项目和团队开发。 在TypeS…...

编程日记 2024/1/11 8:37:32

书生·浦语第三次作业

我最近在参加书生浦语大模型实战营&#xff0c;这是第三次作业打卡&#xff01; 如果你也想两周玩转大模型微调&#xff0c;部署与测评全链路。报名链接&#xff1a;invite 书生浦语大模型实战营报名 邀请码可以填026014 一、基础作业&#xff1a;复现课程知识库助手搭建过程…...

编程日记 2024/1/11 8:35:30

GPT实战系列-LangChain + ChatGLM3构建天气查询助手

GPT实战系列-LangChain ChatGLM3构建天气查询助手 用ChatGLM的工具可以实现很多查询接口和执行命令&#xff0c;而LangChain是很热的大模型应用框架。如何联合它们实现大模型查询助手功能&#xff1f;例如调用工具实现网络天气查询助手功能。 LLM大模型相关文章&#xff1a; …...

编程日记 2024/1/11 8:34:29

LeetCode 2696.删除子串后的字符串最小长度：栈

【LetMeFly】2696.删除子串后的字符串最小长度&#xff1a;栈 力扣题目链接&#xff1a;https://leetcode.cn/problems/minimum-string-length-after-removing-substrings/ 给你一个仅由 大写 英文字符组成的字符串 s 。 你可以对此字符串执行一些操作&#xff0c;在每一步操…...

编程日记 2024/1/11 8:32:27

Xcode15 升级问题记录

这里写自定义目录标题 新版本Xcode15升级问题1&#xff1a;rsync error: some files could not be transferred (code 23) at ...参考 新版本Xcode15升级 下载地址&#xff1a;https://developer.apple.com/download/all/ 我目前使用的版本是Xcode15.2 我新创建了一个项目&…...

编程日记 2024/1/11 8:30:25

List、Set、Map有什么区别？

List、Set和Map是Java中的三种基本数据结构&#xff0c;它们在元素重复性、有序性和用途方面存在显著的区别。 元素重复性&#xff1a; List允许有重复的元素。任何数量的重复元素都可以在不影响现有重复元素的值及其索引的情况下插入到List集合中。 Set集合不允许元素重复。…...

编程日记 2024/1/11 8:28:24

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

编程新知 2025/10/1 22:26:06

Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

编程新知 2025/9/20 4:34:47

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

编程新知 2026/1/31 6:09:22

多模态大语言模型arxiv论文略读（108）

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

编程新知 2026/2/1 6:11:51

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中，常常会遇到 跨域请求接口 的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。 什么是代理（proxy）？ 代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...

编程新知 2025/10/27 20:33:34

【JavaSE】多线程基础学习笔记

多线程基础 -线程相关概念 程序&#xff08;Program&#xff09; 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序&#xff0c;比如我们使用QQ&#xff0c;就启动了一个进程&#xff0c;操作系统就会为该进程分配内存…...

编程新知 2025/9/12 0:57:34

宇树科技，改名了！

提到国内具身智能和机器人领域的代表企业&#xff0c;那宇树科技&#xff08;Unitree&#xff09;必须名列其榜。 最近&#xff0c;宇树科技的一项新变动消息在业界引发了不少关注和讨论&#xff0c;即&#xff1a; 宇树向其合作伙伴发布了一封公司名称变更函称&#xff0c;因…...

编程新知 2026/1/28 9:44:45

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

编程新知 2026/1/31 8:45:21

抽象类和接口（全）

一、抽象类 1.概念&#xff1a;如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象&#xff0c;这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法&#xff0c;包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中&#xff0c;⼀个类如果被 abs…...

编程新知 2026/2/5 4:38:22

redis和redission的区别

Redis 和 Redisson 是两个密切相关但又本质不同的技术&#xff0c;它们扮演着完全不同的角色&#xff1a; Redis: 内存数据库/数据结构存储 本质&#xff1a; 它是一个开源的、高性能的、基于内存的 键值存储数据库。它也可以将数据持久化到磁盘。 核心功能&#xff1a; 提供丰…...

编程新知 2025/11/6 1:34:07