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

css基础-浮动

news 来源：原创 2025/7/24 12:34:33

一、浮动是什么？

比喻：就像泳池里的救生圈

原始用途：让文字环绕图片（像杂志排版）
意外发展：被用来做页面布局（像用救生圈搭浮桥）

二、浮动怎么产生的？

场景还原：

正常文档流：元素像书架上的书，严格从上到下排列

开启浮动：元素变成"悬浮书"，会：

脱离书架（脱离文档流）
漂向指定方向（left/right）
后面的书会填补空隙（产生文字环绕效果）

经典布局案例：

<!DOCTYPE html>
<style>.container {border: 3px solid red;  /* 父容器边框 */margin: 20px;}.float-box {float: left;           /* 开启左浮动 */width: 150px;height: 100px;background: skyblue;margin: 10px;}.normal-content {background: #ffe0b2;   /* 后续普通内容 */padding: 15px;}
</style><!-- 问题场景 -->
<div class="container"><div class="float-box"></div><div class="float-box"></div>
</div><div class="normal-content"><h2>我是后续内容</h2><p>我本应该在父容器下方，现在却紧贴浮动元素...</p>
</div>

20250322211603

👉 效果：两栏并排布局（早期网页常用手法）

三、浮动带来的问题

比喻：泳池里的救生圈漂走后…

父容器塌陷（高度消失）

现象：父元素变成"空泳池"，背景边框失效

原因：浮动的子元素不占父容器空间

后续元素乱跑

现象：后面的内容紧贴浮动元素排列

示例：页脚跑到右侧栏旁边

布局错位

现象：多个浮动元素卡在容器边缘无法换行

四、解决方案大全

方法1：人工救生杆（空div清除法）

<div class="parent"><div class="float-box">浮动元素</div><div style="clear: both;"></div> <!-- 插入清除杆 -->
</div>\

✅ 优点：简单直接
❌ 缺点：增加无意义标签

方法2：魔法防护罩（overflow触发BFC）

.parent {overflow: hidden; /* 或 auto */
}

✅ 优点：代码简洁
❗ 注意：可能隐藏溢出内容

方法3：专业清洁工（clearfix黑科技结合伪元素）

/* 现代最推荐方案 */
.clearfix::after {content: "";display: block;clear: both;
}

使用方式：

<div class="parent clearfix"><div class="float-box">浮动元素</div>
</div>

✅ 优点：无副作用，专业级解决方案

方法4：新时代救生艇（Flex/Grid布局）

/* Flex方案 */
.parent {display: flex;gap: 20px; /* 间距 */
}/* Grid方案 */
.parent {display: grid;grid-template-columns: 1fr 2fr; /* 两栏布局 */
}

✅ 优势：彻底告别浮动烦恼
🚀 推荐：现代布局的首选方案

五、使用建议

方案	适用场景	学习优先级
clearfix	维护老项目	★★★☆☆
Flex布局	大多数现代布局	★★★★★
Grid布局	复杂二维布局	★★★★☆
overflow	简单场景快速修复	★★☆☆☆

六、调试技巧

浏览器检查：按F12查看元素是否"浮起来"（脱离文档流）

颜色标记法：给父元素加背景色，观察是否塌陷

渐进式布局：先写HTML结构，再逐步添加浮动

css overflow: hidden——隐藏溢出、清除浮动、解决坍塌问题

css基础-浮动

一、浮动是什么？ 比喻：就像泳池里的救生圈原始用途：让文字环绕图片（像杂志排版）意外发展：被用来做页面布局（像用救生圈搭浮桥） 二、浮动怎么产生的？ 场景还原&#…...

编程日记 2025/7/24 12:34:33

Linux TTY设备汇总

目录 1. ‌tty（终端设备统称） 2. ‌ptm（伪终端主设备）与pts（伪终端从设备） 3. ‌ttys（串行端口终端） 4. ‌ttyACM（USB CDC ACM设备） 5. ‌ttyGS（USB Gadget Serial设备）主要联系‌ ‌典型应用场景‌ TTY_CORE: drivers/tty/tty_io.c:tty_register_driver…...

编程日记 2025/7/24 12:34:32

Android studio组合教程--做出一个类似于QQ的登录页面

之前我们学过了html与Android的开发，以及各种组件的学习，这次我们做一个完整向的登录页面，作为一次大作业。注意里面的一图片可以自由发挥，但要注意文件路径保持准确，这里给出参考路径： 背景路径&…...

编程日记 2025/7/24 12:32:22

iPhone 16 Plus ：凉凉了

大屏就是生产力，这句话就像思想钢印一样，深入人心。但苹果用户是个例外，根据内行人的爆料，iPhone 16 Plus 彻底凉凉了，难怪它会是最后一代Plus。根据知名博主数码闲聊站透露，截止3 月 9 号，i…...

编程日记 2025/7/22 19:48:23

【MySQL报错】：Column count doesn’t match value count at row 1

MySQL报错：Column count doesn’t match value count at row 1 意思是存储的数据与数据库表的字段类型定义不相匹配. 由于类似 insert 语句中，前后列数不等造成的主要有3个易错点： 要传入表中的字段数和values后面的值的个数不相等。由于类…...

编程日记 2025/7/21 7:59:36

2025 polarctf春季个人挑战赛web方向wp

来个弹窗先用最基础的xss弹窗试一下 <script>alert("xss")</script>没有内容，猜测过滤了script，双写绕过一下 <scrscriptipt>alert("xss")</scscriptript>background 查看网页源代码查看一下js文件类…...

编程日记 2025/7/15 23:56:55

Midscene.js自然语言驱动的网页自动化全指南

一、概述网页自动化在数据抓取、UI 测试和业务流程优化中发挥着重要作用。然而，传统工具如 Selenium 和 Puppeteer 要求用户具备编程技能，编写复杂的选择器和脚本维护成本高昂。Midscene.js 通过自然语言接口革新了这一领域，用户只需描述任…...

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

PDF与Markdown的量子纠缠：一场由VLM导演的文档界奇幻秀

缘起：当格式界的"泰坦尼克号"撞上"黑客帝国" 某个月黑风高的夜晚，在"二进制酒吧"的霓虹灯下： PDF（西装革履地晃着威士忌）: “我的每一页都像瑞士手表般精密，连华尔街的秃鹫都为我倾倒！” Markdown（穿着带洞的拖鞋）: “得了吧老古董！…...

编程日记 2025/7/20 20:45:03

Spring Boot JSON序列化深度管控：忽略指定字段+Jackson扩展策略破解双向实体循环引用问题

一、JsonIgnore的核心原理与工作机制 1. 注解作用原理 JsonIgnore是Jackson库的核心注解之一，其工作原理基于 Jackson的AnnotationIntrospector机制。在序列化/反序列化过程中，Jackson会扫描Java对象的所有字段和方法上的注解。当检测到JsonIgnore时&a…...

编程日记 2025/7/21 10:23:49

msvcp140.dll是什么文件？修复丢失msvcp140.dll的方法指南

当计算机显示"msvcp140.dll未找到"的报错信息时，这实际反映了Windows系统运行机制中的一个关键环节出现断链。作为Microsoft Visual C可再发行组件包的核心动态链接库，msvcp140.dll承担着程序与系统资源之间的桥梁作用，特别是在处理…...

编程日记 2025/7/18 10:45:53

ES集群的部署

实验步骤实验目的： 验证ES集群的容错性、扩展性数据分布与查询性能优化。环境准备 1、准备两台服务器服务器 1、10.1.1.20 cpu 2核内存：4G 硬盘100G 2、10.1.1.21 cpu 2核内存：4G 硬盘100G 2、修改两台静态ip 3、关闭防…...

编程日记 2025/7/20 17:37:16

resetForm() 方法用于重置表单

resetForm() 方法是 Vue.js 中用于重置表单的一个常见操作。下面是对这段代码的详细解析： 1. 代码作用 resetForm() 方法的作用是重置表单，将表单中的所有输入字段恢复到初始状态（通常是清空或恢复到默认值）。 2. 代码解析 re…...

编程日记 2025/7/20 17:06:10

Java后端API限流秘籍：高并发的防护伞与实战指南

目录导航 📜 🛡️ 为什么需要API限流？🧠 主流限流算法大解析👩‍💻 阿里巴巴的限流实践📏 四大黄金定律🤼 限流策略组合拳🏆 限流场景实战💻 技术实现方案🌟 最佳实践分享📈 结语与展望📚 推荐阅读 1. 🛡️ 为什么需要API限流？在高并发环境中，未…...

编程日记 2025/7/18 21:12:17

团体协作项目总结Git

使用Git开放时候发现本地, 有些代码并没有被拉取到本地仓库, 又不想再commit一次, 这时候我就想到了 git commit --amend 合并提交 git commit --amend 修改git提交记录用法详解可以将本次提交记录合并到上一次合并提交 git commit --amendgit rebase -i master^^ // 假设我…...

编程日记 2025/7/21 16:08:18

mysql 入门

1.已经下载过却卸载不干净？注册表清理不到位？ 使用greek绿色版强力卸载，可以一键卸载注册表里的信息。 2.如何启动mysql服务？ 以管理员方式启动cmd 输入 net start mysql80 如何停止？ net stop mysql80 2.将mysql客…...

编程日记 2025/7/20 1:22:41

1.基于TCP的简单套接字服务器实现

目录 1. TCP通信流程 2. 服务器端的通信流程 2.1 创建用于监听的套接字 2.2 绑定本地IP地址和端口 2.3 设置监听 2.4 等待接受客户端的连接请求 2.5 与客户端进行通信 2.6 客户端连接服务器 3.代码实现 client.cpp server.cpp 运行方式在本文中，我们将…...

编程日记 2025/7/19 17:20:05

MantisBT在Windows10上安装部署详细步骤

MantisBT 是一款基于 Web 的开源缺陷跟踪系统，以下是在 Windows 10 上安装部署 MantisBT 的详细步骤： 1. 安装必要的环境 MantisBT 是一个基于 PHP 的 Web 应用程序，因此需要安装 Web 服务器（如 Apache）、PHP 和数据…...

编程日记 2025/7/24 4:02:00

zookeepernacoskafka之间的联系

一、ZooKeeper与Kafka的协同工作原理 1. 核心关系：Kafka对ZooKeeper的依赖在Kafka 2.8版本之前，ZooKeeper是Kafka集群的“大脑”，负责管理集群元数据、协调节点状态和故障恢复。两者的协同主要通过以下关键机制实现： Broker注册…...

编程日记 2025/7/14 13:35:08

【QT】布局器

参考博客：https://blog.csdn.net/Fdog_/article/details/107522283 目录布局管理器概念常见的布局管理器及特点🔵QHBoxLayout水平布局🔵QVBoxLayout垂直布局 🔵QGridLayout网格布局 🔵QFormLayout表单布局 QT 高级布…...

编程日记 2025/7/21 17:35:53

力扣45.跳跃游戏

45. 跳跃游戏 II - 力扣（LeetCode） 代码区： #include<vector> class Solution {public:int jump(vector<int>& nums) {int ans[10005] ;memset(ans,1e4,sizeof(ans));ans[0]0;for(int i0;i<nums.size();i){for(int j1;j…...

编程日记 2025/7/24 4:56:28

【蓝桥杯】真题路径（数论+dp）

思路求最小公倍数LCM问题很好求，这里看似是求图最短路径，实际上由于只有[i,i21]之间存在路径，所以用线性dp效率更高，当然用bfs，dijstra，floyed也可，毕竟是填空题。 code def gcd(a,b):if a …...

编程日记 2025/7/20 22:47:18

敏捷需求分析之INVEST原则

INVEST原则是什么 INVEST 是用户故事的六个核心标准，由敏捷教练 Bill Wake 提出，用于确保用户故事具备可执行性和价值导向性。 1. I - Independent（独立的）含义：用户故事应独立于其他故事，避免依赖关系。问题：若故事 A 必须等待故事 B 完成才能开发，会导致进度阻塞。…...

编程日记 2025/7/16 5:14:10

Apache Flink技术原理深入解析：任务执行流程全景图

前言本文隶属于专栏《大数据技术体系》，该专栏为笔者原创，引用请注明来源，不足和错误之处请在评论区帮忙指出，谢谢！本专栏目录结构和参考文献请见大数据技术体系思维导图 📌 引言 Apache Flink 作为一款高性能的分布式流处理引擎，其内部执行机制精妙而复杂。本文将…...

编程日记 2025/7/20 1:43:12

UE5小石子阴影在非常近距离才显示的问题

Unreal中采用LandscapeGrass生成的地形，在MovieRenderQueue中渲染时阴影显示距离有问题，在很近的时候才会有影子，怎么解决？ 地面上通过grass生成的小石子的阴影只能在很近的时候才能显示出来，需要如下调整 r.Shadow.R…...

编程日记 2025/7/21 14:07:48

WebAssembly实践，性能也有局限性

个人博客原文地址 WebAssembly（简称 wasm） 是一种旨在突破 Web 性能瓶颈的技术方案。它由 W3C 官方推动，并且得到了主流浏览器的广泛支持。它的核心思想是通过运行其他高性能编程语言（比如 C、C、Rust 等）来实现复杂功…...

编程日记 2025/7/19 8:24:12

第一天学爬虫

阅读提示：我今天才开始尝试爬虫，写的不好请见谅。一、准备工具 requests库：发送HTTP请求并获取网页内容。BeautifulSoup库：解析HTML页面并提取数据。pandas库：保存抓取到的数据到CSV文件中。二、爬取步骤发送请求…...

编程日记 2025/7/16 22:36:42

【FAQ】HarmonyOS SDK 闭源开放能力 —Push Kit（11）

1.问题描述： 鸿蒙push右侧图表没有正常展示。解决方案： .jpg格式文件，头信息必须是这个“jpg：ffd8”。 2.问题描述： 安卓端App在开发者平台申请了Android应用的通知消息自分类权益，鸿蒙应用的自分类权…...

编程日记 2025/7/21 21:10:20

Spring WebSecurityCustomizer 的作用

Spring WebSecurityCustomizer 是 Spring Security 框架中用来自定义 Web 安全配置的一个接口。它的主要作用是在开发中我们能够精细的控制哪些请求会被 Spring Security 完全忽略，不进行任何安全检查和过滤。我们可以把它想象成是 Spring Security 大门上的一…...

编程日记 2025/7/19 8:18:28

uniapp动态循环表单校验失败：初始值校验

问题现象 💥 在实现动态增减的单价输入表单时（基于uv-form组件），遇到以下诡异现象： <uv-input>的v-model绑定初始值为数字类型时，required规则失效 ❌数字类型与字符串类型校验表现不一致 🔢技术栈背景 🛠️ 框架：Vue3 + uni-appUI库：uv-ui校验方案：计算属…...

编程日记 2025/7/21 5:42:41

线性代数核心概念与NumPy科学计算实战全解析

前言学习方法： 思维导图，梳理多记忆，函数名和功能，参数学会应用，不要钻牛角尖一、浅解线性代数 1.1标量标量是一个只有大小没有方向的量。在数学上，标量通常表示为一个普通的数字，如‌质量…...

编程日记 2025/7/23 11:40:23

如何理解 Apache Iceberg 与湖仓一体（Lakehouse）？

一、什么是湖仓一体（Lakehouse）？ 湖仓一体是一种融合了数据湖的灵活存储能力与数据仓库的高效分析功能的现代数据架构。它通过整合两者的优势，解决了传统架构的局限性，为企业数据处理提供了更全面的解决方案。数据湖…...

编程日记 2025/7/18 23:22:26

若依框架二次开发——若依集成 JSEncrypt 实现密码加密传输方式

文章目录一、问题场景二、相关技术介绍1. RSA 加密算法2. JSEncrypt三、实现步骤1. 前端加密处理2. 后端解密处理3. 登录逻辑处理四、测试流程1. 前端测试2. 后端测试3. 运行效果五、总结一、问题场景在 RuoYi 系统中，默认情况下，用户在登录时会将明文密码直接传输到服务器…...

编程日记 2025/7/23 20:29:02

Rust Web 开发新选择：探索 Hyperlane 轻量级 HTTP 服务器框架

Rust Web 开发新选择：探索 Hyperlane 轻量级 HTTP 服务器框架在 Web 开发领域，Rust 以其高性能和内存安全性逐渐受到关注。而在众多 Web 框架中，hyperlane 作为一款轻量级、高性能的 HTTP 服务器框架，正悄然成为 Rust 生态中的明…...

编程日记 2025/7/19 4:51:07

初识模版和 STL

前言今天简单和大家分享一下C重要的两个内容，经过之前的学习我们已经了解了C的大致语法，接下来就是C相关的库和一些操作了，他们能极大地缩小我们C语言阶段的代码量，让写代码变得轻松起来。 1.关于模版 <1>泛型编程我们学…...

编程日记 2025/7/22 5:26:42

加新题了，MySQL 8.0 OCP 认证考试题库更新

MySQL 8.0 OCP 认证考试题库更新 MySQL 8.0 Database Administrator 考试科目：1Z0-908 近期发现，MySQL OCP认证考试题库发生变化，出现了很多新题，对此，CUUG专门收集整理了最新版本的MySQL考试原题，并会给…...

编程日记 2025/7/23 10:23:11

26考研——树与二叉树_树、森林（5）

408答疑文章目录二、树、森林树的基本概念树的定义和特性树的定义树的特性基本术语树的基本术语和概念祖先、子孙、双亲、孩子、兄弟和堂兄弟结点的层次、度、深度和高度树的度和高度分支结点和叶结点有序树和无序树路径和路径长度森林的基本术语和概念森林的定义森林与树的…...

编程日记 2025/7/24 1:15:30

26考研——图_图的基本概念（6）

408答疑文章目录一、图的基本概念图的定义非空性非线性结构顶点和边的表示顶点边有向图 & 无向图有向图有向图 G 1 G_1 G1 的表示无向图无向图 G 2 G_2 G2 的表示简单图 & 多重图简单图多重图顶点的度、入度和出度顶点的度有向图的度路径、路径长度和回路…...

编程日记 2025/6/28 1:57:52

笔试面试01 c/c++

基础知识什么是数据结构？请简要描述常见的数据结构类型。数据结构是组织和存储数据的方式，以便于高效访问和修改。常见的数据结构包括： 数组：固定大小的线性数据结构，支持随机访问。链表：由节点组成的线…...

编程日记 2025/7/18 11:47:53

2025清华大学：DeepSeek教程全集（PDF+视频精讲，共10份）.zip

一、资料列表第一课：Deepseek基础入门第二课：DeepSeek赋能职场第三课：普通人如何抓住DeepSeek红利第四课：让科研像聊天一样简单第五课：DeepSeek与AI幻觉第六课：基于DeepSeek的AI音乐词曲的创造法第…...

编程日记 2025/7/17 1:48:14

消息队列(Kafka及RocketMQ等对比联系)

目录消息队列一、为什么使用消息队列？消息队列有什么优点/缺点？介绍下Kafka、ActiveMQ、RabbitMQ、RocketMQ有什么优点缺点，如何取舍？ 1.公司业务场景是什么，这个业务场景有什么挑战，如果不用MQ有什么麻…...

编程日记 2025/7/24 8:46:33

Go 语言 fmt 模块的完整方法详解及示例

以下是 Go 语言 fmt 模块的完整方法详解及示例，涵盖所有核心功能： 一、输出函数将数据写入标准输出、文件或字符串。 1. Print / Println / Printf 功能 Print: 写入标准输出，不换行。Println: 写入标准输出并换行。Printf: 格式化写入标…...

编程日记 2025/7/19 12:38:48

Centos 7 安装VNC服务

Centos 7 安装VNC服务 1. 安装 TigerVNC2. 设置 VNC 密码3. 创建并配置 x0vncserver 服务4. 启用并启动服务5. 检查服务状态6. 配置防火墙7. 连接 VNC问题1:出现无法安装可能是镜像源导致的。手动配置镜像源清除 YUM 缓存并重新加载 1. 安装 TigerVNC 确保已安装 TigerVNC 服务…...

编程日记 2025/7/19 13:55:21

一.request断言 if断言案例： import requests srequests.Session() url1"http://49.233.201.254:8080/cms/manage/loginJump.do" data1{userAccount:admin,loginPwd:123456} h1{"Content-Type":"application/x-www-form-urlencoded&…...

编程日记 2025/7/22 6:56:03

cmakelist中添加opencv

版本选择 qt的msvc，版本2019 opencv版本 4.5.3 配置了环境变量 x64下的v14中的bin 配置头文件 {"configurations": [{"name": "Win32","includePath": ["${workspaceFolder}","d:\\QT\\6.5.3\\msvc20…...

编程日记 2025/7/22 2:22:12

【003安卓开发方案调研】之ReactNative技术开发安卓

基于2025年最新行业动态和搜索资料，以下是针对国内使用React Native（RN）开发安卓应用的深度分析： 一、技术成熟度评估 1. 核心架构升级新架构全面普及：2024年起，React Native的新架构（Fabri…...

编程日记 2025/7/24 1:04:54

面试中如何回答性能优化的问题

性能问题和Bug不同，后者的分析和解决思路更清晰，很多时候从应用日志（文中的应用指分布式服务下的单个节点）即可直接找到问题根源，而性能问题，其排查思路更为复杂一些。对应用进行性能优化，是一个系统性的工程，对工程师的技术广度和技术深度都有所要求。一个简单的应用…...

编程日记 2025/7/24 7:52:51

使用cursor开发java案例——springboot整合elasticsearch

安装elasticsearch 打开cursor，输入如下提示词使用springboot整合elasticsearch。其中elasticsearch服务器ip：192.168.236.134 管理员用户名elastic 管理员密码 PdQy_xfR2yLhpok*MK_ 监听端口9200点Accept all 使用idea打开生成的项目 &#xff0…...

编程日记 2025/7/15 1:30:47