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

CSS：浮动

news 2025/12/16 1:49:19

▐ 文档流：

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

▐ 浮动：

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

UE5 学习系列（二）用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

编程新知 2025/12/15 0:55:08

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

编程新知 2025/11/6 5:46:16

前端倒计时误差!

提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

编程新知 2025/9/8 23:14:43

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

编程新知 2025/12/14 17:46:27

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

编程新知 2025/12/9 0:43:28

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

编程新知 2025/12/10 7:13:40

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

编程新知 2025/12/13 4:20:30

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

编程新知 2025/9/24 16:25:00

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...

编程新知 2025/9/27 12:03:43

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程，两张表是相同的结构，都有整型主键id字段，需要每次从数据库分批取得2000条数据，用于比较，比较操作的同时可以再取2000条数据，等上一次比较完成之后，开始比较，直到比较完所有的数据。比较操作需要比较…...

编程新知 2025/9/14 5:35:46