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

CSS：浮动

news 2025/8/30 11:00:01

▐ 文档流：

由于网页默认是一个二维平面，当我们在网页中一行行摆放标签时，块标签会独占一行，行标签则只占自身大小，这种情况下要实现网页布局就很麻烦了，所以我们就需要通过一些方法来改变这种默认的布局方式！

▐ 浮动：

CSS中的浮动属性可以让标签脱离原来的文档流，也就是二维平面，浮动后的标签默认是内容的大小，且可以为其设置宽和高。

➱ 语法：float：left(向左浮动)  /  right(向右浮动)  /  none(不浮动)

▐ 存在问题：

 浮动后的标签不占用原来文档流的空间，下面的标签就会向上移动，会影响后面的网页布局。

▐ 如何解决浮动问题？

 1. 为父级标签设置高度，将父级标签撑开。

 2. 在浮动的标签后使用清除浮动属性，自动让父级标签撑开（推荐）

▐ 实战练习：

✎. 例如我们做一个导航栏，如图所示：

第一步：用4个<div>标签来修饰内容并通过css设置背景颜色和文字颜色

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>.content{//设置文字颜色和背景颜色color: antiquewhite;background-color: #50536e;		}</style></head><body><div class="content">消息</div><div class="content">动态</div><div class="content">收藏</div><div class="content">投稿</div></body>
</html>

第二步：通过css的浮动属性，让4个<div>漂浮在一行，且浮动后的div标签默认是内容大小

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>.content{color: antiquewhite;background-color: #50536e;//向左浮动float: left;}</style></head><body>	<div class="content">消息</div><div class="content">动态</div><div class="content">收藏</div><div class="content">投稿</div></body>
</html>

第三步：为浮动后的4个<div>标签设置宽和高，并使文本内容居中

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>.content{color: antiquewhite;background-color: #50536e;	float: left;//设置宽高以及文本居中text-align: center;width: 150px;height: 50px;line-height: 50px; }</style></head><body><div class="content">消息</div><div class="content">动态</div><div class="content">收藏</div><div class="content">投稿</div>	</body>
</html>

第四步：使这4个<div>标签整体在页面上居中。需要在这4个div标签外部再套一个div标签，

并设置这个父级div标签宽度=4*子级div标签宽度，通过margin: 0% auto;使其居中即可。  🎀 这里只有让父级div标签宽度=4*子级div标签宽度 才能实现居中，否则该父级div标签是默认占一整行的，无法通过margin: 0% auto;使其居中.

📖 不了解margin属性的小伙伴可以参考之前 CSS：盒子模型 的文章：

CSS：盒子模型-CSDN博客

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>.content{color: antiquewhite;background-color: #50536e;float: left;text-align: center;width: 150px;height: 50px;line-height: 50px; 	}.head{width: 600px;margin: 0% auto;} </style></head><body><div class="head"><div class="content">消息</div><div class="content">动态</div><div class="content">收藏</div><div class="content">投稿</div></div></body>
</html>

第五步：清除浮动影响；即在浮动标签后添加一个clear属性修饰的空div标签即可。

      ➱     注意是在浮动的标签后添加，不要添加到父级标签之后了!

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>.content{color: antiquewhite;background-color: #50536e;float: left;text-align: center;width: 150px;height: 50px;line-height: 50px; }.head{width: 600px;margin: 0% auto;} </style></head><body>	<div class="head"><div class="content">消息</div><div class="content">动态</div><div class="content">收藏</div><div class="content">投稿</div><div style="clear: left;"></div><!-- 清除浮动影响 --></div>	</body>
</html>

清除浮动后，在之后的网页布局中下面的标签就不会向上移动了；例如我们在这个导航栏后添加一个标题标签<h1>标题<h1>测试下：

这是不清除浮动效果的结果：

 本次的分享就到此为止了，希望我的分享能给您带来帮助，创作不易也欢迎大家三连支持，你们的点赞就是博主更新最大的动力！如有不同意见，欢迎评论区积极讨论交流，让我们一起学习进步！有相关问题也可以私信博主，评论区和私信都会认真查看的，我们下次再见

海漫浩浩,我亦苦作舟!大家一起学习,一起进步!  本人微信：g2279605572

相关文章：

CSS：浮动

▐ 文档流&#xff1a; 由于网页默认是一个二维平面&#xff0c;当我们在网页中一行行摆放标签时&#xff0c;块标签会独占一行&#xff0c;行标签则只占自身大小&#xff0c;这种情况下要实现网页布局就很麻烦了&#xff0c;所以我们就需要通过一些方法来改变这种默认的布局方…...

编程日记 2024/5/29 23:45:48

SQL 语言：嵌入式 SQL 和动态 SQL

文章目录 基本概述嵌入式 SQL动态 SQL总结 基本概述 嵌入式SQL和动态SQL是两种在应用程序中嵌入和使用SQL语句的方法。它们都允许开发人员在编程语言中编写SQL语句&#xff0c;以便在应用程序中执行数据库操作。然而&#xff0c;这两种方法在实现方式、性能和灵活性方面存在一…...

编程日记 2024/5/29 23:44:47

Java Object类方法介绍

Object作为顶级类&#xff0c;所有的类都实现了该类的方法&#xff0c;包括数组。 查询Java文档&#xff1a; 1、object.eauqls(): 其作用与 有些类似。 &#xff1a; 是一个比较运算符&#xff0c;而不是一个方法。 ①可以判断基本类型&#xff0c;也可以判断引用类型。 ②若…...

编程日记 2024/5/29 23:43:46

2024 京麟ctf -MazeCodeV1

文章目录 检查代码思路一个字节的指令注意附上S1uM4i佬们的exp https://www.ctfiot.com/184181.html 检查 代码 __int64 __fastcall check_solve(char *a1) {__int64 result; // rax__int64 v2; // rax__int64 index_step; // rax__int64 v4; // rax__int64 v5; // rax__int64…...

编程日记 2024/5/29 23:41:43

计算机网络基础 - 计算机网络和因特网(1)

计算机网络基础 计算机网络和因特网什么是 Internet?具体构造的的角度服务角度网络结构 网络边缘网络核心电路交换分组交换概述排队时延和分组丢失转发表和路由选择协议按照有无网络层的连接 分组交换 VS 电路交换 接入网DSL 因特网接入电缆因特网接入光纤到户 FTTH无线接入网…...

编程日记 2024/5/29 23:38:41

自学动态规划——零钱兑换

零钱兑换 322. 零钱兑换 - 力扣&#xff08;LeetCode&#xff09; 注意几个关键的地方&#xff1a; 因为每次都是找min&#xff0c;所以我们不能将所有元素都初始化为0&#xff0c;不然最后结果一定是0&#xff0c;这里我设置为0x3f3f3f3f&#xff0c;表示无解。当amount0的…...

编程日记 2024/5/29 23:37:39

kafka单机安装及性能测试

kafka单机安装及性能测试 Apache Kafka是一个分布式流处理平台&#xff0c;最初由LinkedIn开发&#xff0c;并于2011年开源&#xff0c;随后成为Apache项目。Kafka的核心概念包括发布-订阅消息系统、持久化日志和流处理平台。它主要用于构建实时数据管道和流处理应用&#xff…...

编程日记 2024/5/29 23:35:38

2024.05.29学习记录

1、css面经复习 2、代码随想录二刷 3、rosebush upload组件初步完成...

编程日记 2024/5/29 23:34:35

6.10 Libbpf-bootstrap（一，简介）

写在前面 在看完前面的介绍，是不是感觉看了也就看了。但是，如果想要像BCC那样使用libbpf编写BPF程序，该怎么开始呢？ 那么这就需要libbpf-bootstrap了。 libbpf-bootstrap是官方推荐的一个范式，就像我们写PPT的模版。简单来说可以简化我们的BPF开发流程，它可以帮助我们…...

编程日记 2024/5/29 23:33:34

2.1.2 基于配置方式使用MyBatis

文章目录 实战目标实战步骤1. 创建Maven项目2. 添加项目依赖3. 创建用户实体类4. 创建用户映射器配置文件5. 创建MyBatis配置文件6. 创建日志属性文件7. 测试用户操作8. 运行测试方法 预期结果实战方法结论 实战目标 本实战的目标是演示如何使用MyBatis框架来操作数据库。通过…...

编程日记 2024/5/29 23:32:33

使用NuScenes数据集生成ROS Bag文件：深度学习与机器人操作的桥梁

在自动驾驶、机器人导航及环境感知的研究中&#xff0c;高质量的数据集是推动算法发展的关键。NuScenes数据集作为一项开源的多模态自动驾驶数据集&#xff0c;提供了丰富的雷达、激光雷达&#xff08;LiDAR&#xff09;、摄像头等多种传感器数据&#xff0c;是进行多传感器融合…...

编程日记 2024/5/29 23:31:30

氢燃料电池汽车行业发展

文章目录 前言 市场分布 整车销售 发动机配套 氢气供应 发展动能 参考文献 前言 见《氢燃料电池技术综述》 见《燃料电池工作原理详解》 见《燃料电池发电系统详解》 见《燃料电池电动汽车详解》 市场分布 纵观全球的燃料电池汽车市场&#xff0c;截至2022年底&#xff…...

编程日记 2024/5/29 23:29:26

Linux服务器配置ssh证书登录

1、ssh证书登录介绍 Linux服务器ssh登录有密码登录和证书登录两种。如果使用密码登录&#xff0c;容易遭受密码泄露或者暴力破解&#xff0c;我们可以使用ssh证书登录并禁止使用密码登录&#xff0c;ssh证书登录通过公钥和私钥来完成整个连接过程&#xff0c;公钥保存在服务器…...

编程日记 2024/5/29 23:28:25

端口扫描利器--nmap

目录 普通扫描 几种指定目标的方法 TCP/UDP扫描 端口服务扫描 综合扫描 普通扫描 基于端口连接并响应(真实) ​ nmap -sn 网段(0/24)-sn 几种指定目标的方法 单个IP扫描 IP范围扫描 扫描文件里的IP 扫描网段,(排除某IP) 扫描网段(排除某清单IP) TCP/UDP扫描 -sS …...

编程日记 2024/5/29 23:27:24

React基础知识笔记

Reat简介 React&#xff1a;用于构建用户界面的 JavaScript 库。由 Facebook 开发且开源。是一个将视图渲染为html视图的开源库 第一章&#xff1a;React入门 相关js库 react.development.js &#xff1a;React 核心库react-dom.development.js &#xff1a;提供 DOM 操作的…...

编程日记 2024/5/29 23:26:23

筛选的艺术：数组元素的精确提取

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、筛选的基本概念 二、筛选的实际应用案例 1. 筛选能被三整除的元素 2. 筛选小于特定值…...

编程日记 2024/5/29 23:25:22

SQLServer2022新特性JSON_PATH_EXISTS测试输入 JSON 字符串中是否存在指定的 SQL/JSON 路径

SQLServer2022新特性JSON_PATH_EXISTS测试输入 JSON 字符串中是否存在指定的 SQL/JSON 路径 参考官方文档 https://learn.microsoft.com/en-us/sql/t-sql/functions/json-path-exists-transact-sql?viewsql-server-ver16 1、本文内容 语法参数返回值示例相关内容 适用于&a…...

编程日记 2024/5/29 23:24:21

力扣：104. 二叉树的最大深度

104. 二叉树的最大深度 给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;3示例 2&#xff1a; 输入&#xff1a…...

编程日记 2024/5/29 23:22:19

嵌入式0基础开始学习 ⅠC语言（3）分支结构

C语言程序设计结构 分三种 顺序结构&#xff1a; 一条一条指令执行。 int a,b; a 3; b 4; 分支结构&#xff08;选择结构&#xff09;&#xff1a;…...

编程日记 2024/5/29 23:21:17

设计模式21——命令模式

写文章的初心主要是用来帮助自己快速的回忆这个模式该怎么用&#xff0c;主要是下面的UML图可以起到大作用&#xff0c;在你学习过一遍以后可能会遗忘&#xff0c;忘记了不要紧&#xff0c;只要看一眼UML图就能想起来了。同时也请大家多多指教。 命令模式&#xff08;Command&…...

编程日记 2024/5/29 23:19:15

【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

编程新知 2025/8/22 4:03:37

练习（含atoi的模拟实现,自定义类型等练习）

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

编程新知 2025/8/22 3:26:39

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

编程新知 2025/8/21 19:34:21

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

编程新知 2025/8/5 9:30:07

成都鼎讯硬核科技！雷达目标与干扰模拟器，以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

编程新知 2025/8/6 8:03:29

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

编程新知 2025/6/21 11:16:25

处理vxe-table 表尾数据是单独一个接口，表格tableData数据更新后，需要点击两下，表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

编程新知 2025/8/28 15:29:23

c++第七天 继承与派生2

这一篇文章主要内容是 派生类构造函数与析构函数 在派生类中重写基类成员 以及多继承 第一部分&#xff1a;派生类构造函数与析构函数 当创建一个派生类对象时&#xff0c;基类成员是如何初始化的&#xff1f; 1.当派生类对象创建的时候&#xff0c;基类成员的初始化顺序 …...

编程新知 2025/8/22 5:07:44

【C++】纯虚函数类外可以写实现吗？

1. 答案 先说答案&#xff0c;可以。 2.代码测试 .h头文件 #include <iostream> #include <string>// 抽象基类 class AbstractBase { public:AbstractBase() default;virtual ~AbstractBase() default; // 默认析构函数public:virtual int PureVirtualFunct…...

编程新知 2025/8/23 6:10:22

pycharm 设置环境出错

pycharm 设置环境出错 pycharm 新建项目&#xff0c;设置虚拟环境&#xff0c;出错 pycharm 出错 Cannot open Local Failed to start [powershell.exe, -NoExit, -ExecutionPolicy, Bypass, -File, C:\Program Files\JetBrains\PyCharm 2024.1.3\plugins\terminal\shell-int…...

编程新知 2025/8/9 4:55:19