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

web前端之文档流、浮动、定位详解

news 2026/5/13 16:32:17

目录

一、文档流

二、浮动

1.添加浮动

2.清除浮动

三、定位

1.相对定位

2.绝对定位

一、文档流

什么是文档流？

        ● 文档流指的是文档中的标签在排列时所占用的位置。 将窗体自上而下分成一行行 ，并在每

行中按从左至右的顺序排放标签，即为文档流。

        ● 也就是说在文档流中标签默认会紧贴到上一个标签的右边，如果右边不足以放下标签，标签

则会另起一行，在新的一行中继 续从左至右摆放。

        ● 这样一来每一个块标签都会另起一行，那么我们如果想在文档 流中进行布局就会变得比较

麻烦。

例如我们想让两个盒子并排存放在网页中

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div class="main_box" style="width: 200px;height: 200px;background-color: red;">我是第一个盒子<br />你们好</div><div class="second_box" style="width: 200px;height: 200px;background-color: aqua;">我是第二个盒子<br />你们好</div></body>
</html>

但实际情况是如下：

我们该如何解决这种问题呢？

这就引出了下面所讲的浮动了

二、浮动

1.添加浮动

        所谓浮动指的是使标签脱离原来的文档流，在父标签中浮动起来。

        语法：float：none/left/right;（分别表示：不浮动、向左浮动、向右浮动）

        注：当一个块级标签浮动以后，宽度会默认是内容的宽度，所以当漂浮一个块级标签时我们都会为其指定一个宽度。

● 当一个标签浮动以后，其下方的标签会上移。
● 浮动会使标签完全脱离文档流，也就是不再在文档中在占用位置标签浮
动以后即完全脱离文档流 , 这时不会再影响父标签的高度 , 也就是浮动标签
不会撑开父标签。

        这时，我们通过给盒子添加浮动，就可以实现上面我们想要的结果了：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.main_box{float: left;}.second_box{float: left;}</style></head><body><div class="main_box" style="width: 200px;height: 200px;background-color: red;">我是第一个盒子<br />你们好</div><div class="second_box" style="width: 200px;height: 200px;background-color: aqua;">我是第二个盒子<br />你们好</div></body>
</html>

2.清除浮动

        但是我们会发现，当我们想继续添加第三个盒子时会导致被第一个盒子覆盖（因为第一个盒子脱离了文档流）：

这时就需要我们为第三个盒子清除浮动了：

● clear属性可以用于清除标签周围的浮动对标签的影响,其他标签的位置不发生变化。
可选值：
        left ： 忽略左侧浮动
        right ：忽略右侧浮动
        both ：忽略全部浮动 
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.main_box{float: left;}.second_box{float: left;}.third_box{clear: left;/*让第三个盒子忽略浮动*/}</style></head><body><div class="main_box" style="width: 200px;height: 200px;background-color: red;">我是第一个盒子<br />你们好</div><div class="second_box" style="width: 200px;height: 200px;background-color: aqua;">我是第二个盒子<br />你们好</div><div class="third_box" style="width: 300px;height: 300px;background-color: pink;">我是第三个盒子<br />你们好</div></body>
</html>

        效果如下：

三、定位

        相信大家在平时浏览网页经常会看到一些轮播图片，图片两侧还有半透明的小箭头供用户选

择图片。这样的功能就需要用到定位操作了

        定位的基本思想很简单，它允许你定义的标签相对于其正常位置，或者相对于父标签、另一

个标签甚至浏览器窗口本身而出现的位置。

1.相对定位

        相对定位是一个非常容易掌握的概念. 相对于它的起点进行移动，移动后原来的位置还被占用。

可以通过position:relative; 开启相对定位

left right top bottom四个属性来设置标签的偏移量。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.main_box{position: relative;/*开启相对定位*/left: 100px;}</style></head><body><div class="main_box" style="width: 200px;height: 200px;background-color: blue;">我是第一个盒子<br />你们好</div></body>
</html>

相对定位的特点 ：
        1.当开启了标签的相对定位以后，而不设置偏移量时，标签不会发生任何变化
        2.相对定位是相对于标签在文档流中原来的位置进行定位
        3.相对定位的标签不会脱离文档流

2.绝对定位

        绝对定位是不占空间的，运用了绝对定位的标签会脱离原来的文档流，浮动起来，因此视觉

上会其他的标签重叠。

可以通过position: absolute; 开启绝对定位
left right top bottom四个属性来设置标签的偏移量 
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.main_box{position: relative;width: 400px;}.butr{width: 20px;position: absolute;margin-left: 380px;margin-top: 120px;opacity: 0.5;}.butl{width: 20px;position: absolute;margin-top: 120px;opacity: 0.5;}.butr{right: 0px;}.butl{left: 0px;}img{width: 400px;}</style></head><body><div class="main_box"><img src="img/aliyun.jpg" alt="" /><input type="button" value=">" class="butr"/><input type="button" value="<" class="butl"/></div></body>
</html>

        这样，我们就完成了一个轮播图片的设计。效果如下：

绝对定位的特点：
        1.开启绝对定位，会使标签脱离文档流
        2.开启绝对定位以后，如果不设置偏移量，则标签的位置不会发生变化
        3.绝对定位是相对于离他最近的开启了定位的祖先标签进行定位（一般情况，开启了子标签 的绝对定位都会同时开启父标签的相对定位） 如果所有的祖先标签都没有开启定位，则会相对于浏览器窗口进行定位

        以上就是关于web前端css部分最后一点内容的补充，希望本篇文章内给大家带来帮助！

相关文章：

web前端之文档流、浮动、定位详解

目录 一、文档流 二、浮动 1.添加浮动 2.清除浮动 三、定位 1.相对定位 2.绝对定位 一、文档流 什么是文档流&#xff1f; ● 文档流指的是文档中的标签在排列时所占用的位置。 将窗体自上而下分成一行行 &#xff0c;并在每 行中按从左至右的顺序排放标签&#xff0c…...

编程日记 2024/6/28 10:49:03

[JS]节点操作

DOM节点 DOM树中的所有内容都是节点, 我们重点关注元素节点 作用 使开发者可以根据节点的关系获取元素, 而不是只能依赖选择器, 提高了编码的灵活性 节点分类 元素节点: 所有的标签都是元素节点, html是根节点属性节点: 所有的属性都是属性节点, 比如href文本节点: 所有的文…...

编程日记 2024/6/28 10:46:59

基于SpringBoot+Vue的论坛网站系统(带1w+文档)

基于SpringBootVue的论坛网站系统(带1w文档) 对于之前论坛网站的管理&#xff0c;大部分都是使用传统的人工方式去管理&#xff0c;这样导致了管理效率低下、出错频率高。而且&#xff0c;时间一长的话&#xff0c;积累下来的数据信息不容易保存&#xff0c;对于查询、更新还有…...

编程日记 2024/6/28 10:44:57

03逻辑门电路

分立门电路&#xff1a; 集成门电路&#xff1a; TTL门电路 MOS门电路&#xff1a;NMOS门电路、PMOS门电路、CMOS门电路 BICMOS门电路&#xff1a;CMOS的高输入阻抗和TTL的高放大倍数的结合 向更低功耗、更高速度发展 MOS管的Rdson在可变电阻区的阻值也一般会小于1000欧姆 …...

编程日记 2024/6/28 10:42:54

2毛钱的SOT23-5封装28V、1.5A、1.2MHz DCDC转换器用于LCD偏置电源和白光LED驱动等MT3540升压芯片

前言 之前发了一个TI的BOOST升压芯片&#xff0c;用于LCD偏置电压或LED驱动&#xff0c;请访问以下链接。 6毛钱SOT-23封装28V、400mA 开关升压转换器&#xff0c;LCD偏置电源和白光LED应用芯片TPS61040 国产半导体厂家发展迅猛&#xff0c;今天推荐一个公司带“航天”的升压…...

编程日记 2024/6/28 10:41:53

Zookeeper部署

Zookeeper部署 下载安装包Linux解压安装包修改配置文件编辑zoo.cf配置 启动服务停止服务常用zookeeper指令查看namespace列表创建namespace删除namespace 注意&#xff1a;该文章为简单部署操作&#xff0c;没有复杂的配置内容&#xff0c;用的是3.7.2版本。 下载安装包 进入z…...

编程日记 2024/6/28 10:37:49

2.x86游戏实战-跨进程读取血量

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 本次游戏没法给 内容参考于&#xff1a;微尘网络安全 接下来会写C/C代码&#xff0c;C/C代码不是很难&#xff0c;然后为了快速掌握逆向这个技能&#xff0c;我…...

编程日记 2024/6/28 10:35:47

element-plus 日期选择添加确定按钮

需求&#xff1a;选择日期后&#xff0c;点击确定按钮关闭面板 思路&#xff1a; 使用shortcuts自定义确定和取消按钮选择日期后使用handleOpen()强制开启面板点击确定后使用handleClose()关闭面板 <template><el-date-pickerref"pickerRef"v-model"…...

编程日记 2024/6/28 10:34:45

Redis优化之持久化

目录 1.Redis高可用 2.Redis持久化 2.1 RDB持久化 2.1.1 触发条件 2.1.2 执行流程 2.1.3 启动时加载 2.2 AOF持久化 2.2.1 开启AOF 2.2.2 执行流程 2.2.3 文件重写触发方式 2.2.4 文件重写的流程 2.2.5 启动时加载 2.3 RDB和AOF的优缺点 3.Redis性能管理 3.1 查看…...

编程日记 2024/6/28 10:33:44

ubuntu22.04 编译安装libcurl C++ library

1. 安装必须的依赖项 sudo apt update #sudo apt install build-essential autoconf libtool pkg-config libssl-dev libz-dev 2. 下载及编译前准备 cd /opt mkdir curl && cd curl mkdir build && mkdir install git clone https://github.com/curl/curl.git…...

编程日记 2024/6/28 10:32:43

js函数闭包解析

闭包是JavaScript中非常重要的概念&#xff0c;理解闭包对于编写高质量的代码是至关重要的。本文将详细解析闭包的概念&#xff0c;并提供一些代码示例来帮助读者更好地理解闭包的使用。 什么是闭包&#xff1f; 闭包是指在一个函数内部定义的函数&#xff0c;该函数可以访问包…...

编程日记 2024/6/28 10:30:41

查看Oracle、MySQL、PostGreSQL中的依赖关系

查看Oracle、MySQL、PostGreSQL中的依赖关系 在有些程序员开发习惯中&#xff0c;喜欢为了应用代码的简洁或复用&#xff0c;而在数据库创建一个复杂关连查询的VIEW&#xff0c;甚至是VIEW套VIEW嵌套使用&#xff0c; 这里就有个问题如果上线后如发现依赖的表字段类型或长度不…...

编程日记 2024/6/28 10:29:40

多线程（基础）

前言&#x1f440;~ 上一章我们介绍了什么是进程&#xff0c;对于进程就了解那么多即可&#xff0c;我们作为java程序员更关注线程&#xff0c;线程内容比较多&#xff0c;所以我们要分好几部分才能讲完 目录 进程的缺点 多线程&#xff08;重要&#xff09; 进程和线程的区…...

编程日记 2024/6/28 10:26:35

BUG cn.bing.com 重定向的次数过多，无法搜索内容

BUG cn.bing.com 重定向的次数过多&#xff0c;无法搜索内容 环境 windows 11 edge浏览器详情 使用Microsoft Edge 必应搜索显示"cn.bing.com"重定向次数过多&#xff0c;无法进行正常的检索功能 解决办法 检查是否开启某些科_学_上_网&#xff08;翻_墙&#xf…...

编程日记 2024/6/28 10:22:30

【数据科学】学习资源汇总（不定时更新）

好书推荐&#xff1a;BooksPDF/数据科学/Python数据科学手册.pdf at master zhixingchou/BooksPDF GitHub...

编程日记 2024/6/28 10:21:29

完美解决ValueError: column index (256) not an int in range(256)的正确解决方法，亲测有效！！！

完美解决ValueError: column index (256) not an int in range(256)的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xff01; 亲测有效 完美解决ValueError: column index (256) not an int in range(256)的正确解决方法&#xff0c;亲测有效&#xff01;&…...

编程日记 2024/6/28 10:20:27

# 音频处理4_傅里叶变换

1.离散傅里叶变换 对于离散时域信号 x[n]使用离散傅里叶变换&#xff08;Discrete Fourier Transform, DFT&#xff09;进行频域分析。 DFT 将离散信号 x[n] 变换为其频谱表示 X[k]&#xff0c;定义如下&#xff1a; X [ k ] ∑ n 0 N − 1 x [ n ] e − j 2 π k n N X[k]…...

编程日记 2024/6/28 10:18:25

提升网络速度的几种有效方法

在数字化时代&#xff0c;网络速度对于我们的日常生活和工作至关重要。无论是观看高清视频、在线游戏&#xff0c;还是进行视频会议&#xff0c;快速稳定的网络连接都是不可或缺的。如果你发现自己当前的网络速度不尽如人意&#xff0c;那么不妨尝试以下几种方法来提升它。 升…...

编程日记 2024/6/28 10:17:23

@PathVariable注解的使用及源码解析

前言 PathVariable 注解是我们进行JavaEE开发&#xff0c;最常见的几个注解之一&#xff0c;这篇博文我们以案例和源码相结合&#xff0c;帮助大家更好的了解PathVariable 注解 使用案例 1.获取 URL 上的值 RequestMapping("/id/{id}") public Object getId(Path…...

编程日记 2024/6/28 10:16:22

服务器配置重点看哪些参数

对服务器有需求时&#xff0c;应重点考虑以下几个关键参数&#xff0c;以下仅供参考&#xff1a; 处理器&#xff08;CPU&#xff09;&#xff1a;包括CPU的品牌&#xff08;如Intel或AMD&#xff09;、型号、核心数、线程数、主频和缓存大小。核心数越多&#xff0c;处理并发请…...

编程日记 2024/6/28 10:15:20

Python 爬虫进阶技巧：多线程异步爬取大幅提升数据采集速度

前言 常规单线程爬虫采用串行阻塞式请求模式&#xff0c;严格按照 “请求页面 — 解析数据 — 保存入库 — 下一页请求” 的线性流程执行&#xff0c;每一次网络请求都需要等待服务器响应、网络传输延时完成后&#xff0c;才能发起下一次任务。在大批量站点列表、分页数据、多…...

编程新知 2026/5/13 15:05:41

ServerPackCreator终极指南：3分钟自动化创建Minecraft服务器包 [特殊字符]

ServerPackCreator终极指南&#xff1a;3分钟自动化创建Minecraft服务器包 &#x1f680; 【免费下载链接】ServerPackCreator Create a server pack from a Minecraft Forge, NeoForge, Fabric, LegacyFabric or Quilt modpack! 项目地址: https://gitcode.com/gh_mirrors/s…...

编程新知 2026/5/13 13:44:50

3步解决Windows 10/11下PL-2303串口设备驱动失效问题

3步解决Windows 10/11下PL-2303串口设备驱动失效问题 【免费下载链接】pl2303-win10 Windows 10 driver for end-of-life PL-2303 chipsets. 项目地址: https://gitcode.com/gh_mirrors/pl/pl2303-win10 你是否遇到过这样的情况&#xff1a;在Windows 10或Windows 11系统…...

编程新知 2026/5/13 13:44:49

Swift原生大语言模型推理引擎llmfarm_core.swift集成与优化指南

1. 项目概述&#xff1a;一个为Swift生态打造的本地大语言模型推理引擎 最近在折腾一个iOS上的AI应用&#xff0c;想把一些轻量级的开源大语言模型&#xff08;LLM&#xff09;直接跑在手机端。大家都知道&#xff0c;现在主流的LLM推理框架&#xff0c;像llama.cpp、ollama&am…...

编程新知 2026/5/13 13:39:52

SAP ABAP开发避坑指南：NATIVE SQL里那个冒号和MANDT字段，你写对了吗？

SAP ABAP开发实战&#xff1a;NATIVE SQL高频陷阱与性能优化全解析 在SAP ABAP开发领域&#xff0c;NATIVE SQL就像一把双刃剑——它既能突破Open SQL的限制直接操作底层数据库&#xff0c;又隐藏着无数让开发者"踩坑"的语法细节。根据SAP官方统计&#xff0c;超过60…...

编程新知 2026/5/13 12:31:01

凡亿AD22--原理图元件复制、剪切、旋转、镜像

核心作用&#xff1a;这4种操作是原理图布局的基础&#xff0c;熟练掌握可大幅提升绘制效率&#xff0c;让元器件布局更规范、信号流向更清晰&#xff0c;提升原理图可读性。一、核心操作详解所有操作均基于「选中元件」为前提&#xff08;单个元件点击选中&#xff0c;多个元件…...

编程新知 2026/5/13 9:42:05

卷积运算：数字信号处理的核心原理与实践

1. 卷积在数字信号处理中的核心地位第一次接触卷积这个概念时&#xff0c;我正坐在实验室里调试一个音频滤波器。示波器上的波形始终无法达到预期效果&#xff0c;直到导师走过来画了那个著名的"翻转滑动"示意图。那一刻我突然明白&#xff0c;卷积不是抽象的数学运算…...

编程新知 2026/5/13 8:27:50

Python爬虫项目架构解析：从Requests到数据清洗的工程化实践

1. 项目概述&#xff1a;一个Python驱动的自动化数据采集与分析工具最近在GitHub上看到一个挺有意思的项目&#xff0c;叫Niceck/hhxg-top-hhxg-python。光看这个仓库名&#xff0c;可能有点摸不着头脑&#xff0c;但点进去研究一下就会发现&#xff0c;这其实是一个用Python编…...

编程新知 2026/5/13 7:28:12

AI自动化新范式：基于MCP协议实现飞书与AI助手深度集成

1. 项目概述与核心价值如果你和我一样&#xff0c;每天的工作都离不开飞书&#xff0c;那你肯定也遇到过这样的场景&#xff1a;想用AI助手帮你整理会议纪要、自动更新项目文档&#xff0c;或者根据Bitable里的数据生成周报&#xff0c;却发现AI只能“看”不能“动”。它理解你…...

编程新知 2026/5/13 7:17:22

从新手到老手：四类Ozon卖家选品工具选择指南

选品工具没有“最好”&#xff0c;只有“最匹配你当前阶段”。四类卖家&#xff0c;四种方案。市面上的Ozon选品工具&#xff0c;功能各有侧重。有的擅长给数据&#xff0c;有的擅长给结论&#xff0c;有的擅长管店铺。不同阶段的卖家&#xff0c;痛点不同&#xff0c;适合的工…...

编程新知 2026/5/13 7:04:59