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

CSS 浮动（Float）及其应用

news 来源：原创 2025/7/27 7:51:47

1. 什么是浮动（Float）？

浮动元素会脱离正常的文档流（Document Flow），并向左或向右移动，直到碰到父元素的边缘或另一个浮动元素。

基本语法

.float-left {float: left;
}.float-right {float: right;
}.no-float {float: none; /* 默认值 */
}

2. 浮动的常见应用场景

(1) 文字环绕图片

<div class="container"><img src="example.jpg" class="float-left" alt="示例图片"><p>这里是环绕的文字内容……</p>
</div>

效果：图片浮动在左侧，文字自动环绕在其右侧。在这里插入图片描述

(2) 多列布局（传统方式）

在 Flexbox 和 Grid 流行之前，浮动是创建多列布局的主要方式。

.father {border: black solid;width: 1250px;margin: 20px;background-color: #f5f5f5;}.left,.right {float: left;margin-left: 10px;}.left {height: 410px;width: 200px;background-color: black;}.right {height: 410px;width: 950px;background-color: blue;}.grandson {height: 188px;width: 200px;background-color: yellow;float: left;margin-left: 30px;margin-top: 10px;}

在这里插入图片描述
最外黑框线父元素father为文档流，其所有孩子都为浮动流，黑色区块left为一列，蓝色区块right为一列。蓝色区块内又有黄色浮动流grandson。

3. 浮动带来的问题及解决方案

(1) 父元素高度塌陷（Collapsing Parent）

问题：当子元素浮动后，父元素无法自动计算高度，导致布局错乱。

<body><div class="father"><div class="left"></div><div class="right"><div class="grandson"></div><div class="grandson"></div><div class="grandson"></div><div class="grandson"></div><div class="grandson"></div><div class="grandson"></div><div class="grandson"></div><div class="grandson"></div></div><div class="clear"></div></div><div class="no">this is not a content</div>
</body>

显示为：
发现父元素高度发生塌陷，后一位文档流顶了上来。
在这里插入图片描述

解决方案：

方法1：使用 clearfix 技巧（推荐）

.clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden;}.clearfix {/* IE6、7 专有 */*zoom: 1;}

<div class="father clearfix">

成功解决：

方法2：使用额外标签

============style============
.clear{
clear:both;
}
=============body============
<div class="clear"></div>>

(2) 浮动元素之间的间隙问题

问题：多个浮动元素之间可能出现意外的空白间隙。
原因：HTML 换行符被解析为空格，或 margin 未正确设置。
解决方案：

移除 HTML 换行（不推荐）

<div class="float-left"></div><div class="float-left"></div>

使用 margin 调整间距

.float-item {float: left;margin-right: 10px;
}

改用 Flexbox 或 Grid（现代布局方案）

CSS 浮动（Float）及其应用

1. 什么是浮动（Float）？ 浮动元素会脱离正常的文档流（Document Flow），并向左或向右移动，直到碰到父元素的边缘或另一个浮动元素。基本语法 .float-left {float: left; }.float-right {float:…...

编程日记 2025/7/27 7:51:47

离散文本表示

目录一、离散文本表示的底层逻辑二、One-hot 编码 （一）One-hot 编码的精妙机制 （二）One-hot 编码的优势与局限三、词袋法（Bag of Words） （一）词袋法的核心思想 &#xff08…...

编程日记 2025/7/17 1:23:34

Python异常处理与OOP深度解析及实战案例

**导读：**在现代软件开发中，异常处理与面向对象编程（OOP）是构建健壮、可维护程序的两大基石。本文深入解析了 Python 中的异常处理机制和 OOP 编程的核心概念，并通过实战案例帮助你掌握这些技术的实际应用。文章从异常…...

编程日记 2025/7/27 8:35:51

KnowCard：我的知识卡片生成器是怎么炼成的？

我正在参加CodeBuddy「首席试玩官」内容创作大赛，本文所使用的 CodeBuddy 免费下载链接：腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴起心动念：我想做个“笔记神器” 有时候，看着笔记本里密密麻麻的学习要点，我…...

编程日记 2025/7/23 10:37:16

JAVA EE（进阶）_进阶的开端

别放弃浸透泪水的昨天，晨光已为明天掀开新篇 ——陳長生. ❀主页：陳長生.-CSDN博客❀ 📕上一篇：JAVA EE_HTTP-CSDN博客 1.什么是Java EE Java EE（Java Pla…...

编程日记 2025/7/22 9:56:07

装甲PPT习题

装甲PPT习题第一章将 42.195 42.195 42.195， 0.0375551 0.0375551 0.0375551， 8.00033 8.00033 8.00033， 2.71828 2.71828 2.71828 按四舍五入写出上述各数具有四位有效数字的近似数。考察三位有效数字重力加速度 g g g，若…...

编程日记 2025/7/25 1:31:27

EasyExcel动态表头

专家官方解答 ： 在使用EasyExcel处理Excel动态表头的问题时，官方并不推荐使用includecolumnfieldnames方法。根据提供的知识内容，以下是如何实现动态表头的详细步骤和解释： 原因分析动态表头的需求通常来源于希望根据用户的选…...

编程日记 2025/7/20 11:28:37

LoadBarWorks：一款赛博风加载动画生成器的构建旅程

我正在参加CodeBuddy「首席试玩官」内容创作大赛，本文所使用的 CodeBuddy 免费下载链接：腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴项目缘起：赛博与实用的结合在日常开发中，我经常需要为不同的项目添加加载动画&#x…...

编程日记 2025/7/23 22:15:12

跨平台多用户环境下PDF表单“序列号生成的服务器端方案“

在PDF表单处理中，经常需要为每个表单生成唯一的序列号或表单编号。当所有表单都在同一台计算机上由同一用户处理时，可以通过JavaScript将编号存储在另一个表单或全局JavaScript数据中来实现。然而，当需要在多台计算机或多个用户环境中使用时&…...

编程日记 2025/7/27 4:33:54

二：操作系统之进程控制块（PCB）

进程的身份证与状态记录：深入理解进程控制块 (PCB) 在我们之前的博客中，我们探讨了进程是什么——程序的一次执行实例，以及进程在其生命周期中会经历的各种状态（新建、就绪、运行、等待、终止）。我们知道，…...

编程日记 2025/7/23 6:11:13

创建型：原型模式

目录 1、核心思想 2、实现方式 2.1 基本结构 2.2 代码示例（Java） 3、适用场景 4、new与clone实际场景建议 1、核心思想目的：通过复制（克隆）现有对象来创建新对象，而不是通过new关键字实例化。对于那…...

编程日记 2025/7/25 7:44:54

从c++到python

从c到python 前言printprint格式化print按原始格式输出 input变量、常量和数据类型整型和type()浮点型复数字符串类型数据类型转换变量地址注释关键字容器列表list下标索引常用功能元组tuple字符串str字符串的成员函数：字符串初始化为几个固定字符字符和int型数据…...

编程日记 2025/7/27 20:33:48

仿腾讯会议——房间界面用户设置

1、房间界面设置 2、添加新设计师界面类 3、设置用户设置 4、添加新类&&设置房间标题 5、设置控件 6、修改用户展示头文件 7、设置用户名 8、客户端添加用户展示 9、测试数据 10、成功截图...

编程日记 2025/7/22 10:33:10

Vue+Go 自定义打字素材的打字网站

Typing_Key_Board 这是一个基于Vue 3和Go语言的自定义素材打字练习网站，灵感来源于常用字打字练习，解决了大多数网站无法自定义打字素材的问题。在 Typing_Key_Board (简称TKB)中，用户可以自定义打字素材进行练习，在复习代码的同…...

编程日记 2025/7/21 13:29:01

生产级编排AI工作流套件：Flyte全面使用指南 — Data input/output

生产级编排AI工作流套件：Flyte全面使用指南 — Data input/output Flyte 是一个开源编排器，用于构建生产级数据和机器学习流水线。它以 Kubernetes 作为底层平台，注重可扩展性和可重复性。借助 Flyte，用户团队可以使用 Python SDK…...

编程日记 2025/7/25 23:00:20

JUC入门（二）

5、8锁现象：就是关于锁的八个问题谁来充当锁？要锁的是什么东西？这个锁有什么用？ 其实锁的作用就是：哪个线程先拿到锁，谁就有先执行同步方法的权力那么谁能充当锁？任何对象都可以充当锁要…...

编程日记 2025/7/25 21:18:22

深入浅出：CPU寻址方式完全指南（从理论到实践）

引言：为什么需要寻址方式？ 当我们写下一行高级语言代码（比如 int sum a b;），计算机底层是如何找到变量 a 和 b 的？ 寻址方式（Addressing Modes） 就是 CPU 定位操作数的策略&#…...

编程日记 2025/7/16 23:55:44

PyQt5基本窗口控件（对话框类控件）

对话框类控件 QDialog 为了更好地实现人机交互，比如Windows及Linux等系统均会提供一系列的标准对话框来完成特定场景下的功能，如选择字号大小、字体颜色等。在PyQt5中定义了一系列的标准对话框类，让使用者能够方便和快捷地通过各个类完成…...

编程日记 2025/7/20 16:21:09

【PostgreSQL系列】PostgreSQL 复制参数详解

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。推荐:kwan 的首页,持续学…...

编程日记 2025/7/10 10:40:18

给easyui的textbox绑定回车事件

项目有一个textbox输入框，需要绑定一个回车搜索事件。一开始想着，直接使用js的on或者jquery的keydown方法直接绑定，但是事件不生效。 $("#propName").textbox({width: 200,prompt: "请输入物品名称进行搜索" }).keydo…...

编程日记 2025/7/24 21:29:55

量子计算 | 量子密码学的挑战和机遇

量子计算在密码学中的应用现主要体现在对现有加密算法的威胁上。最著名的例子是Shor算法，该算法能够在多项式时间内分解大整数，从而威胁到基于大数分解的加密算法，如RSA加密。此外，量子计算还可以加速某些类型的密码分析&#xff…...

编程日记 2025/7/26 12:47:43

什么是着色器 Shader

本人就是图形学结课了，对 OpenGL着色器还有很多疑问嘿嘿文章目录为什么要有着色器vshaderfshader 本文围绕 vshader 和 fshader 代码示例讲解。 （着色器代码取自本人简单OpenGL项目 https://github.com/DBWGLX/-OpenGL-3D-Lighting-and-Shadow-Modeli…...

编程日记 2025/7/27 7:57:20

STM32H562----------启动时钟分析

1、H562启动过程分析 1.1、启动模式复位方式有三种：上电复位、硬件复位和软件复位。当产生复位后，离开复位状态后 CM33 内核做的第一件事就是读取堆栈指针 MSP 的初始值及程序计数器指针 PC 的初始值： 1、从地址 0x0000 0000 处读取出堆栈指针 MSP 的初始值，该值即栈…...

编程日记 2025/7/15 14:11:39

MIT 6.S081 2020 Lab4 traps 个人全流程

零、写在前面做之前可以看看Chapter 4：Traps and systems calls，了解XV6 下的陷入机制 https://pdos.csail.mit.edu/6.828/2020/xv6/book-riscv-rev1.pdf 这个实验旨在探索系统调用如何实现了trap，会先做一个有关栈的练习，然后…...

编程日记 2025/7/24 16:12:03

基于YOLOv8-OBB的旋转目标检测：从数据制作到自动标注完整指南

一、引言目标检测作为计算机视觉中的核心任务，广泛应用于安防监控、自动驾驶、工业质检等场景。传统的目标检测方法多使用水平边界框（HBB）进行目标定位。然而在一些特殊应用场景（如遥感图像、文本检测、PCB检测等）中…...

编程日记 2025/7/22 2:27:03

【自然语言处理与大模型】向量数据库：Chroma使用指南

Chroma是一款功能强大的开源 AI 应用数据库，专为高效数据存储与检索而设计。它不仅支持 Embedding 和 Metadata 的存储，还集成了多项核心功能，包括向量搜索、全文搜索、Document 存储、Metadata 过滤以及多模态检索。此外，Chroma …...

编程日记 2025/7/16 18:35:36

一文掌握工业相机选型计算

目录一、基本概念 1.1 物方和像方 1.2 工作距离和视场 1.3 放大倍率 1.4 相机芯片尺寸二、公式计算三、实例应用一、基本概念 1.1 物方和像方在光学领域，物方（Object Space）是与像方（Image Space）相对的…...

编程日记 2025/7/25 1:08:51

【周输入】510周阅读推荐-3

前文【周输入】510周阅读推荐-1-CSDN博客【周输入】510周阅读推荐-2-CSDN博客本次推荐目录前文本次推荐算法技术模型产品算法技术 vLLM和DeepSpeed部署模型的优缺点_vllm deepspeed-CSDN博客优点缺点总结vLLM 适用于推理优化内存管理高效并行化功能单…...

编程日记 2025/7/24 20:28:10

机器学习（11）——xgboost

文章目录 1. 算法背景和动机1.1. 提升算法（Boosting）1.2. XGBoost的改进动机2. 算法基础 3. 核心创新3.4 稀疏感知算法 4. 系统优化4.1 列块(Column Block)4.2 缓存感知访问4.3 外存计算 5. 算法细节5.1 树生长策略5.2 特征重要性评估5.3 自定义目标函数…...

编程日记 2025/7/11 14:12:25

大语言模型上下文长度：发展历程、局限与技术突破

1. 引言：什么是上下文长度及其重要性上下文长度（Context Length），也称为上下文窗口（Context Window），指的是大语言模型（LLM）在处理和生成文本时能够有效记忆和利用的信…...

编程日记 2025/7/24 23:05:56

ControlNet简洁

ControlNet 什么是ControlNet ControlNet是一种用于控制扩散模型生成结果的网络结构。该结构可以将边缘图，结构图等信息注入扩散模型，从而能够对生成结果进行更为精细的控制。 ControlNet是怎么实现的在模型结构方面，其大致结构如下图所…...

编程日记 2025/7/23 19:59:41

【C】C程序内存分配

文章目录 1. C程序内存布局 1. C程序内存布局从低地址到高地址依次为： 代码段存储内容：存放编译后的机器指令特点：代码段是只读的；可共享，多个进程可共享同一份代码数据段存储内容已初始化的全局变量已初始化的静…...

编程日记 2025/7/25 18:40:12

论文学习：《引入TEC - LncMir，通过对RNA序列的深度学习来预测lncRNA - miRNA的相互作用》

长链非编码RNA ( long noncoding RNAs，lncRNAs )是一类长度通常大于200个核糖核苷酸的非编码RNA ，微小RNA ( microRNAs，miRNAs )是一类由22个核糖核苷酸组成的短链非编码RNA。近年来，越来越多的研究表明，lncRNA和miRNA…...

编程日记 2025/7/27 9:27:20

【每日一题丨2025年5.12～5.18】排序相关题

个人主页：Guiat 归属专栏：每日一题文章目录 1. 【5.12】P1068 [NOIP 2009 普及组] 分数线划定2. 【5.13】P5143 攀爬者3. 【5.14】P12366 [蓝桥杯 2022 省 Python B] 数位排序4. 【5.15】P10901 [蓝桥杯 2024 省 C] 封闭图形个数5.【5.16】P12165 [蓝桥…...

编程日记 2025/7/26 17:43:31

AIDA64 extreme7.5 版本注册激活方法

一、AIDA 7.5 序列号 3BQN1-FUYD6-4GDT1-MDPUY-TLCT7 UVLNY-K3PDB-6IDJ6-CD8LY-NMVZM 4PIID-N3HDB-IWDJI-6DMWY-9EZVU 二、安装激活方法激活步骤： 1、打开AIDA64软件，点击顶部菜单栏的“帮助”→“输入序列号” 2、将生成的序列号粘贴至输入框&a…...

编程日记 2025/7/26 10:10:04

Python 条件语句详解

条件语句是编程中用于控制程序流程的基本结构，Python 提供了几种条件语句来实现不同的逻辑判断。 1. if 语句最基本的条件语句形式： if 条件:# 条件为真时执行的代码块示例： age 18 if age > 18:print("你已经成年了")2. …...

编程日记 2025/7/23 12:00:26

模型评估与调优(PyTorch)

文章目录模型评估方法混淆矩阵混淆矩阵中的指标ROC曲线（受试者工作特征）AUCR平方残差均方误差（MSE）均方根误差（RMSE）平均绝对误差（MAE） 模型调优方法交叉验证（CV&#x…...

编程日记 2025/7/21 2:23:34

oppo手机安装APK失败报错：安装包异常

如果你的apk文件在oppo手机安装失败了，像这样： 先说我们当时解决方式： 如果还没上架应用市场的测试包，在上面图一中需要关闭“超级守护”，类似华为的纯净模式。如果开启了还还不行，安装页面的报错太笼统不…...

编程日记 2025/7/24 12:21:24

互联网大厂Java面试场景：从缓存到容器化的技术问答

场景：互联网大厂Java面试之旅面试官：严肃的技术专家应聘者：搞笑的水货程序员明哥第一轮：缓存技术与数据库优化面试官：明哥，你能谈谈Redis的常见使用场景和一些优化技巧吗？ 明哥&#xf…...

编程日记 2025/7/22 2:27:18

【android bluetooth 协议分析 01】【HCI 层介绍 6】【WriteLeHostSupport命令介绍】

HCI 指令 HCI_Write_LE_Host_Support 是 Bluetooth Host 向 Controller 发送的一条指令，用于启用或禁用主机对 Bluetooth Low Energy（LE）的支持能力。该指令属于 HCI（Host Controller Interface）命令集合中&#xff0c…...

编程日记 2025/7/27 14:07:55

Helm配置之为特定Deployment配置特定Docker仓库（覆盖全局配置）

文章目录 Helm配置之为特定Deployment配置特定Docker仓库（覆盖全局配置）需求方法1：使用Helm覆盖值方法2: 在Lens中临时修改Deployment配置步骤 1: 创建 Docker Registry Secret步骤 2: 在 Deployment 中引用 Secret参考资料Helm配置之为特定Deployment配置特定Docker仓库（覆…...

编程日记 2025/7/24 7:31:17

项目：在线音乐播放服务器——基于SSM框架和mybatis

介绍项目项目主要是基于SSM框架和mybatis进行实现主要的功能： 登陆界面，用户注册，音乐的播放列表，删除指定的歌曲，批量删除指定的歌曲，收藏歌曲，查询歌曲，从收藏列表中删除收藏…...

编程日记 2025/7/24 18:15:17

Linux配置vimplus

配置vimplus CentOS的配置方案很简单，但是Ubuntu的解决方案网上也很多但是有效的很少，尤其是22和24的解决方案，在此我整理了一下我遇到的问题解决方法 CentOS7 一键配置VimForCPP 基本上不会有什么特别难解决的报错 sudo yum install vims…...

编程日记 2025/7/20 22:50:55

新建启动文件 sudo vim /etc/systemd/system/trojan.service 2. 写入配置文件 [Unit] DescriptionTrojan Proxy Service Afternetwork.target[Service] Typesimple ExecStart/home/cui/Downloads/trojan/trojan -c /home/cui/Downloads/trojan/config.json Restarton-failur…...

编程日记 2025/7/22 17:17:20

高效查询：位图、B+树

1. 位图（BitMap）与布隆过滤器（Bloom Filter） 1.1. 问题背景与解决方案问题背景场景：网页爬虫判重搜索引擎的爬虫会不断地解析网页中的链接并继续爬取。一个网页可能在多个页面中出现，容易重复爬取。…...

编程日记 2025/7/26 13:45:13

HashMap的扩容机制

在添加元素或初始化的时候需要调用resize方法进行扩容，第一次添加数据初始化数组长度为16，以后每次每次扩容都是达到了扩容阈值（数组长度 * 0.75） 每次扩容的时候，都是扩容之前容量的2倍； 扩容之后&#…...

编程日记 2025/7/23 20:07:37

从坏道扫描到错误修复：HD Tune实战指南

一、硬盘检测的必要性随着计算机使用时间的增加，机械硬盘和固态硬盘都会出现不同程度的性能衰减。定期进行硬盘健康检查可以：及时发现潜在故障；预防数据丢失风险；掌握存储设备实际状态。二、HD Tune功能解析性能测试&#x…...

编程日记 2025/7/25 8:11:11

Leetcode 3553. Minimum Weighted Subgraph With the Required Paths II

Leetcode 3553. Minimum Weighted Subgraph With the Required Paths II 1. 解题思路2. 代码实现题目链接：3553. Minimum Weighted Subgraph With the Required Paths II 1. 解题思路这一题很惭愧，并没有自力搞定，是看了大佬们的解答才有…...

编程日记 2025/7/26 23:52:56

算法加训之最短路上（dijkstra算法）

目录 P4779 【模板】单源最短路径（标准版）（洛谷） 思路 743. 网络延迟时间（力扣） 思路 1514.概率最大路径（力扣） 思路 1631.最小体力消耗路径思路 1976. 到达目的地的方案数 …...

编程日记 2025/7/26 5:01:48

01 Nginx安装及基本配置

01 Nginx安装 # 官网：https://nginx.org/en/ # 点击下载图1 Nginx下载官网 # https://nginx.org/en/download.html # 全是各个平台的源码包图2 Nginx下载版本 # 找到最下面的stable and mainline(稳定版和主线版)图3 找到最下面的稳定版 # https://nginx.org/en/li…...

编程日记 2025/7/16 19:52:04