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

CSS：浮动

news 2026/3/31 19:08:56

▐ 文档流：

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

▐ 浮动：

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

告别重复造轮子：用快马AI一键生成高安全性的标准化登录模块

告别重复造轮子&#xff1a;用快马AI一键生成高安全性的标准化登录模块 最近在开发一个需要用户系统的项目时&#xff0c;遇到了一个常见但耗时的问题&#xff1a;如何快速实现一个既安全又美观的登录模块。相信很多开发者都深有体会&#xff0c;每次新建项目都要从头开始写登…...

编程新知 2026/3/31 19:02:26

利用快马AI平台，十分钟为小龙虾openclaw机械爪搭建可运行原型

最近在折腾一个开源机械爪项目——小龙虾openclaw&#xff0c;需要快速验证硬件设计和控制逻辑。传统开发流程从写代码到烧录测试至少半天起步&#xff0c;但这次尝试用InsCode(快马)平台做原型开发&#xff0c;居然十分钟就搞定了可运行版本&#xff01;记录下这个高效的工作流…...

编程新知 2026/3/31 18:58:20

Pinyin-pro 3.15.1版本避坑指南：老项目兼容性问题解决方案

Pinyin-pro 3.15.1版本避坑指南&#xff1a;老项目兼容性问题解决方案 在技术迭代飞快的今天&#xff0c;前端开发者常常面临一个尴尬局面&#xff1a;新发布的工具库在功能上令人惊艳&#xff0c;却因为底层依赖或语法特性与老项目环境不兼容而无法直接使用。Pinyin-pro作为中…...

编程新知 2026/3/31 18:05:39

Unity 6升级后频繁闪退？别慌，这8个D3D11崩溃的修复方法亲测有效

Unity 6升级后D3D11崩溃全攻略&#xff1a;从快速修复到深度优化 刚升级到Unity 6的开发者们&#xff0c;是否正被突如其来的编辑器崩溃搞得焦头烂额&#xff1f;那些令人抓狂的"D3D11设备丢失"弹窗&#xff0c;不仅打断工作流&#xff0c;还可能让宝贵项目进度陷入停…...

编程新知 2026/3/31 17:15:04

Cursor Pro免费激活指南：3步解锁AI编程工具的完整功能

Cursor Pro免费激活指南&#xff1a;3步解锁AI编程工具的完整功能 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve reached your tri…...

编程新知 2026/3/31 17:13:04

如何用3dsconv解决3DS游戏格式兼容问题：从入门到精通的转换指南

如何用3dsconv解决3DS游戏格式兼容问题&#xff1a;从入门到精通的转换指南 【免费下载链接】3dsconv Python script to convert Nintendo 3DS CCI (".cci", ".3ds") files to the CIA format 项目地址: https://gitcode.com/gh_mirrors/3d/3dsconv …...

编程新知 2026/3/31 16:40:21

探索音乐资源获取：如何通过开源工具畅享高品质音乐体验

探索音乐资源获取&#xff1a;如何通过开源工具畅享高品质音乐体验 【免费下载链接】lxmusic- lxmusic(洛雪音乐)全网最新最全音源 项目地址: https://gitcode.com/gh_mirrors/lx/lxmusic- 在数字音乐时代&#xff0c;寻找稳定、免费且高质量的音乐资源成为许多音乐爱好…...

编程新知 2026/3/31 16:22:09

2016-2025年地级市链长制数据

在产业链现代化与协同治理进程中&#xff0c;“链长制”作为一项关键的制度创新&#xff0c;为破解产业链条松散、协同不足等问题提供了重要抓手&#xff0c;其政策效果与影响机制成为当前学术研究与政策制定的焦点议题。周钰丁、田思远在研究中指出&#xff0c;产业链“链长制…...

编程新知 2026/3/31 16:22:08

打破游戏边界：Sunshine构建你的无缝云游戏体验

打破游戏边界&#xff1a;Sunshine构建你的无缝云游戏体验 【免费下载链接】Sunshine Self-hosted game stream host for Moonlight. 项目地址: https://gitcode.com/GitHub_Trending/su/Sunshine 想象一下这样的场景&#xff1a;你在客厅的智能电视上玩着3A大作&#x…...

编程新知 2026/3/31 16:19:58

AFL++实战：从零开始用WSL搭建模糊测试环境（附libxml2案例）

AFL实战指南&#xff1a;WSL环境下的模糊测试从入门到精通 模糊测试&#xff08;Fuzz Testing&#xff09;作为软件安全测试的重要手段&#xff0c;近年来在漏洞挖掘领域展现出惊人的效果。对于Windows平台开发者而言&#xff0c;Windows Subsystem for Linux&#xff08;WSL&…...

编程新知 2026/3/31 15:20:39