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

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

news 2026/2/10 15:38:29

目录

一、文档流

二、浮动

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

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

编程新知 2026/2/8 4:37:17

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

编程新知 2025/10/5 2:30:38

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

编程新知 2026/1/15 4:39:38

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

编程新知 2025/11/30 16:55:29

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...

编程新知 2026/2/9 1:38:05

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

编程新知 2026/1/1 14:01:45

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

编程新知 2026/1/31 23:25:09

QT： `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

编程新知 2026/2/1 6:30:04

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

编程新知 2026/2/8 5:28:24

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

编程新知 2026/2/5 4:21:48