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

CSS 浮动（Float）及其应用

article 2025/9/12 4:46:57

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. 什么是浮动&#xff08;Float&#xff09;&#xff1f; 浮动元素会脱离正常的文档流&#xff08;Document Flow&#xff09;&#xff0c;并向左或向右移动&#xff0c;直到碰到父元素的边缘或另一个浮动元素。 基本语法 .float-left {float: left; }.float-right {float:…...

编程日记 2025/9/5 19:06:17

CC53.【C++ Cont】一维前缀和

目录 1.定义 2.作用 3.例题:【模板】一维前缀和 分析 方法1:暴力解法 方法2:前缀和(简单的动态规划) 第一步:预处理 4.练习:P1115 最大子段和 分析 方法1:段长从1枚举到n 方法2:改进方法1 代码 提交结果 1.定义 快速求出数组中某一段的区间和,时间复杂度为(速度极…...

编程日记 2025/9/5 19:06:09

Python爬虫实战：研究Grab 框架相关技术

1. 引言 1.1 研究背景与意义 随着互联网的快速发展，网络上的数据量呈爆炸式增长。如何高效地获取和利用这些数据成为了当前的研究热点。网络爬虫作为一种自动获取网页内容的技术，能够按照一定的规则，自动地抓取万维网信息，在搜索引擎、数据挖掘、信息整合等领域有着广泛的…...

编程日记 2025/6/24 18:47:51

每日leetcode

1502. 判断能否形成等差数列 - 力扣&#xff08;LeetCode&#xff09; 题目 给你一个数字数组 arr 。 如果一个数列中&#xff0c;任意相邻两项的差总等于同一个常数&#xff0c;那么这个数列就称为 等差数列 。 如果可以重新排列数组形成等差数列&#xff0c;请返回 true …...

编程日记 2025/9/9 9:25:35

YouTube视频字幕转成文章算重复内容吗？

很多创作者误以为「自己说的话不算抄袭」&#xff0c;却不知道YouTube自动生成的字幕早已被搜索引擎存档。 去年就有案例&#xff1a;某美食博主将教程视频字幕转为图文&#xff0c;结果原创度检测仅42%&#xff0c;导致页面权重暴跌。 本文揭秘5个实操技巧&#xff1a;从删除…...

编程日记 2025/9/8 18:45:19

网络学习-利用reactor实现http请求（六）

一、实现HTTP请求 1、印象里面&#xff0c;总有人说C/C语言不能实现HTTP请求&#xff0c;其实不然。C/C语言完全可以实现HTTP请求。通过对select,poll,epoll等IO多路复用技术的学习以及reactor模式的学习&#xff0c;完全能够实现HTTP请求。 2、webserver 主要解决两个问题 …...

编程日记 2025/9/9 17:23:44

云原生安全：IaaS安全全解析（从基础到实践）

🔥「炎码工坊」技术弹药已装填！ 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念：IaaS的核心价值与安全边界 1.1 什么是IaaS？ 基础设施即服务（Infrastructure as a Service）是云计算的基础层，提供虚拟机、存储、网络等基础资源。用户通过…...

编程日记 2025/9/4 23:27:27

【IC_Design】跨时钟域的寄存器更新后锁存

目录 设计逻辑框图场景概述总结电路使用注意事项***波形图代码 设计逻辑框图 场景概述 最典型的应用场景就是——在一个时钟域&#xff08;比如 CPU/总线域&#xff09;更新了一个多位配置字&#xff0c;需要把它安全地送到另一个时钟域&#xff08;比如时钟发生器、串口、视频…...

编程日记 2025/9/11 17:10:32

Spring AI 之提示词

提示词（Prompts）是引导人工智能（AI）模型生成特定输出的输入内容。这些提示词的设计和措辞会显著影响模型的响应。 在 Spring AI 中，与 AI 模型进行交互的最低层级上，处理提示词的方式与 Spring MVC 中管理“视图”（View）有些相似。这涉及创建包含动态内容占位符的冗长…...

编程日记 2025/9/1 20:22:43

亚远景-汽车软件开发的“升级之路”：ASPICE各等级说明

ASPICE&#xff08;Automotive SPICE&#xff09;将汽车软件开发过程的成熟度划分为六个等级&#xff0c;从0级到5级&#xff0c;每个等级代表了组织在软件开发过程中的不同能力水平。以下是各等级的详细说明&#xff1a; 等级0&#xff1a;不完整&#xff08;Incomplete&#…...

编程日记 2025/7/15 9:44:20

Java微服务架构：Spring Cloud全栈指南，附最新Demo源码，可独立运行！

在日常java开发中你是不是经常遇到这种问题&#xff1a;开发中不知道要引入什么版本&#xff0c;创建新项目时直接从老工程拷贝引入了一堆杂乱的包&#xff0c;随便升级下其中一个包就导致整个微服务跑不起来&#xff01; 如果你也遇到这种问题&#xff0c;可以认证看下本篇文…...

编程日记 2025/9/8 18:45:06

使用LLaMA-Factory微调ollama中的大模型（一）------家用电脑安装LLaMA-Factory工具

前提&#xff1a;本机已安装python&#xff0c;且版本大于3.9&#xff0c;推荐3.10 官方规定如下 我已安装 1.安装torch 查看自己电脑显卡信息 说明我没有装CUDA 使用 nvidia-smi 命令查看驱动信息 说明我NVIDIA 显卡已安装驱动&#xff0c;支持的 CUDA Runtime 版本为 12.6…...

编程日记 2025/9/8 18:45:02

支持向量机（SVM）：分类与回归的数学之美

在机器学习的世界里&#xff0c;支持向量机&#xff08;Support Vector Machine&#xff0c;简称 SVM&#xff09;是一种极具魅力且应用广泛的算法。它不仅能有效解决分类问题&#xff0c;在回归任务中也有着出色的表现。下面&#xff0c;就让我们深入探索 SVM 如何在分类和回归…...

编程日记 2025/9/8 18:44:58

手撕I2C和SPI协议实现

手撕I2C和SPI协议实现 目录 I2C协议原理I2C位操作实现I2C驱动代码编写SPI协议原理SPI位操作实现SPI驱动代码编写 I2C协议原理 I2C&#xff08;Inter-Integrated Circuit&#xff09;是一种串行通信总线&#xff0c;使用两根线&#xff1a;SCL&#xff08;时钟线&#xff09…...

编程日记 2025/8/31 13:42:15

人工智能+：职业价值的重构与技能升级

当“人工智能”成为产业升级的标配时&#xff0c;一个令人振奋的就业图景正在展开——不是简单的岗位替代&#xff0c;而是职业价值的重新定义。这场变革的核心在于&#xff0c;AI并非抢走工作机会&#xff0c;而是创造了人类与技术协作的全新工作范式。理解这一范式转换的逻辑…...

编程日记 2025/9/8 18:44:54

JVM部分内容

1.JVM内存区域划分 为什么要划分内存区域&#xff0c;JAVA虚拟机是仿照真实的操作系统进行设计的&#xff0c;JVM也就仿照了它的情况&#xff0c;进行了区域划分的设计。 JAVA进程也就是JAVA虚拟机会从操作系统申请内存空间给进程使用&#xff0c;JVM内存空间划分&#xff0c…...

编程日记 2025/9/8 18:44:50

paddlehub搭建ocr服务

搭建环境&#xff1a; Ubuntu20.041080Ti显卡 由于GPU硬件比较老&#xff0c;是Pascal架构&#xff0c;只能支持到paddle2.4.2版本&#xff0c;更高版本无法支持&#xff1b;同时&#xff0c;因为paddle老版本的依赖发生了变化&#xff0c;有些地方存在冲突&#xff0c;花费了…...

编程日记 2025/9/10 23:14:40

python-leetcode 68.有效的括号

题目&#xff1a; 给定一个只包括“&#xff08;”)&#xff0c;{&#xff0c;}&#xff0c;[&#xff0c;] 的字符串 s &#xff0c;判断字符串是否有效。 有效字符串需满足&#xff1a;左括号必须用相同类型的右括号闭合&#xff1b;左括号必须以正确的顺序闭合&#xff0c…...

编程日记 2025/9/10 5:02:03

人性的裂痕：社会工程学如何成为网络安全的隐形战场

引言 在技术高度发达的今天&#xff0c;网络安全防护墙看似坚不可摧&#xff0c;但黑客却总能找到一条“捷径”——利用人性的弱点。这种被称为“社会工程学”的攻击手段&#xff0c;不依赖复杂的代码漏洞&#xff0c;而是通过心理操纵和信息欺骗&#xff0c;让受害者主动交出…...

编程日记 2025/9/3 3:35:53

ObservableCollection序列化，和监听链表内元素变化

1.ObservableCollection序列化 情景&#xff1a;定义了A类、B类&#xff1b; A类里面有ObservableCollection<B>类型的属性&#xff0c;假设这个属性名称为BList&#xff1b; ObservableCollection<MotionIntervalSegmentation> motionIntervalSegmentation; [B…...

编程日记 2025/8/31 13:58:19

NLP学习路线图（四）：Python编程语言

引言 自然语言处理&#xff08;Natural Language Processing, NLP&#xff09;是人工智能领域最引人注目的分支之一。从智能客服到机器翻译&#xff0c;从舆情分析到聊天机器人&#xff0c;NLP技术正在重塑人机交互的边界。本文将结合Python编程语言&#xff0c;带您走进NLP的…...

编程日记 2025/9/8 18:44:42

matlab实现无线通信组

无线通信组网涉及多个节点之间的通信&#xff0c;通常需要考虑节点的布局、信号传输、路径损耗、干扰等问题。在MATLAB中&#xff0c;可以通过模拟节点的位置、信号强度、路径损耗等因素来实现一个简单的无线通信组网程序。 1. 节点布局 首先&#xff0c;我们需要定义网络中的…...

编程日记 2025/8/31 14:05:48

基于单片机的室内采光及可燃气体泄漏报警装置设计

标题:基于单片机的室内采光及可燃气体泄漏报警装置设计 内容:1.摘要 随着人们对室内环境安全和舒适度要求的提高&#xff0c;设计一种能实时监测室内采光和可燃气体泄漏情况并及时报警的装置具有重要意义。本设计基于单片机实现室内采光及可燃气体泄漏报警功能&#xff0c;采用…...

编程日记 2025/9/5 1:19:49

Serverless爬虫架构揭秘：动态IP、冷启动与成本优化

一、问题背景&#xff1a;旧技术的瓶颈 在传统爬虫架构中&#xff0c;我们通常部署任务在本地机器或虚拟机中&#xff0c;搭配定时器调度任务。虽然这种方式简单&#xff0c;但存在以下明显缺陷&#xff1a; 固定IP易被封禁&#xff1a;目标网站如拼多多会通过IP频率监控限制…...

编程日记 2025/9/8 18:44:38

从单体到分布式：深入解析Data Mesh架构及其应用场景与价值

Data Mesh&#xff08;数据网格&#xff09;是一种新兴的数据架构范式&#xff0c;旨在解决传统集中式数据平台的可扩展性、敏捷性和治理问题。它强调领域驱动的分布式数据所有权、自助数据平台以及跨组织的协作&#xff0c;使数据成为产品&#xff0c;并通过去中心化的方式提高…...

编程日记 2025/9/8 18:44:34

AI大模型ms-swift框架实战指南（十三）：Agent智能体能力构建指南

系列篇章&#x1f4a5; No.文章1AI大模型ms-swift框架实战指南&#xff08;一&#xff09;&#xff1a;框架基础篇之全景概览2AI大模型ms-swift框架实战指南&#xff08;二&#xff09;&#xff1a;开发入门之环境准备3AI大模型ms-swift框架实战指南&#xff08;三&#xff09…...

编程日记 2025/9/8 18:44:30

LLM最后怎么输出值 解码语言模型：从权重到概率的奥秘

LM Head Weights&#xff08;语言模型头部权重&#xff09;&#xff1a;左侧的“LM Head Weights”表示语言模型头部的权重矩阵&#xff0c;它是模型参数的一部分。权重矩阵与输入数据进行运算。Logits&#xff08;未归一化对数概率&#xff09;&#xff1a;经过与LM Head Weig…...

编程日记 2025/9/8 18:44:27

Leetcode百题斩-回溯

回溯是一个特别经典的问题&#xff0c;也被排在了百题斩的第一部分&#xff0c;那么我们接下来来过一下这个系列。 这个系列一共八道题&#xff0c;偶然间发现我两年前还刷到这个系列的题&#xff0c;回忆起来当时刚经历淘系大变动与jf出走海外事件&#xff0c;大量同事离职闹…...

编程日记 2025/9/11 17:16:42

超小多模态视觉语言模型MiniMind-V 训练

简述 MiniMind-V 是一个超适合初学者的项目&#xff0c;让你用普通电脑就能训一个能看图说话的 AI。训练过程就像教小孩&#xff1a;先准备好图文材料&#xff08;数据集&#xff09;&#xff0c;教它基础知识&#xff08;预训练&#xff09;&#xff0c;再教具体技能&#xf…...

编程日记 2025/9/8 18:44:17

边缘云的定义、实现与典型应用场景！与传统云计算的区别！

一、什么是边缘云&#xff1f;‌ 边缘云是一种‌分布式云计算架构‌&#xff0c;将计算、存储和网络资源部署在‌靠近数据源或终端用户的网络边缘侧‌&#xff08;如基站、本地数据中心或终端设备附近&#xff09;&#xff0c;而非传统的集中式云端数据中心。 ‌核心特征‌&…...

编程日记 2025/9/8 18:44:13