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

css基础之浮动相关学习

news 来源：原创 2025/7/4 22:53:16

一、浮动基本介绍

在最初，浮动是用来实现文字环绕图片效果的，现在浮动是主流的页面布局方式之一。

效果/代码

图片环绕

代码

  div {width: 600px;height: 400px;background-color: skyblue;}img {width: 200px;float: right;margin-right: 0.5em;}<div>

文字环绕

代码

 <style>div {width: 600px;height: 400px;background-color: skyblue;}img {width: 200px;float: right;margin-right: 0.5em;}.cont::first-letter {font-size: 80px;float: left;}</style>
</head>
<body><div><img src="../富掌柜app.jpg" alt="">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos totam aliquid magni nisi recusandae mollitia accusantium, perspiciatis, debitis necessitatibus, similique maiores officia asperiores dolorem nulla! Iste a facilis, assumenda at fugit debitis deserunt natus ipsum dolor vel ratione aperiam modi nulla. Quo voluptates tempora blanditiis enim qui provident incidunt est rerum quam ad. Ea iure officiis eaque alias id delectus, doloremque harum blanditiis tempore quos sint beatae, illum ullam quod sit in veritatis molestiae! Deserunt, facere. Cupiditate accusantium animi alias, esse neque repellat ipsa nostrum nisi quia numquam aut veniam impedit sint sunt non fugiat ea? Odio nostrum commodi saepe ab tenetur dolor laborum, illo porro impedit nesciunt incidunt placeat tempore eaque fugit autem natus cupiditate. Cumque, vel. Eligendi, exercitationem nostrum. Obcaecati sapiente optio soluta dolores ducimus corporis, expedita dolore? Deserunt minus maxime at perferendis, quidem nisi praesentium ad quasi obcaecati eius distinctio maiores corrupti, nulla voluptatibus iure, voluptatem nihil reprehenderit! Ab architecto autem fuga aliquam libero velit ullam explicabo facere consequuntur deleniti adipisci asperiores debitis enim repellendus qui, incidunt voluptatum commodi praesentium impedit dolores? Ipsam molestiae accusantium maxime quibusdam laboriosam consequuntur ut cum eaque iusto pariatur corrupti unde tenetur suscipit tempora, iste quas voluptatibus earum! Corporis dolorum totam quidem.</div><hr><div class="cont">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis ipsam aspernatur dicta, vero atque est, obcaecati, error illo in consequuntur accusamus natus tempora id maxime. Quidem harum deleniti voluptate sapiente dolorem. Voluptatem, distinctio illum excepturi inventore in ad eaque molestias quos doloremque, quaerat nesciunt numquam laboriosam repellendus, beatae maiores eveniet reiciendis placeat aliquam saepe. Quis hic iste accusamus quas dolor nisi ut eligendi quod nobis molestiae, facere tempora labore eveniet placeat, nihil officiis voluptas nostrum, dolorem doloremque corporis ad. Minus quibusdam minima, voluptatem, pariatur ut labore dolores ratione est, odit non atque. Magni, quas doloribus? Non officiis quasi magnam dolorem.</div>
</body>
</html>

二、元素浮动后的特点

🤢脱离文档流。
😊不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽
高。
😊不会独占一行，可以与其他元素共用一行。
😊不会 margin 合并，也不会 margin 塌陷，能够完美的设置四个方向的 margin 和 padding 。
😊不会像行内块一样被当做文本处理（没有行内块的空白问题）。

效果/代码

在这里插入图片描述

三、浮动小示列

设置一个外边的大盒子，里面装三个div元素，进行操作这些元素，验证浮动后的5个特点

元素基本结构以及样式

.outer {width: 600px;border: 1px solid black;}.box {width: 100px;height: 100px;background-color: pink;border: 1px solid black;margin: 10px;}<div class="outer"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div></div>

3.1 盒子1右浮动

效果
代码
```
 .box1 {float: right;}
```

3.2 盒子1左浮动

盒子2跑到盒子1的底部去了，将文字甩出来了，重叠到盒子3了，实际上是盒子1浮动起来了

效果
代码
```
 .box1 {float: left;}
```

3.3 所有的盒子都浮动

将1~3元素全部浮动起来，变成行内块元素

效果
代码
```
.box {float: left;}
```

3.4 盒子3落下来

所有盒子浮动后，盒子3落下来，实际上就是把盒子变大一些 ,大于父容器的宽度，最终就会落下来，将高度也撑开了

效果

代码

  .box {width: 200px;height: 200px;float: left;}

3.5 盒子3 落到右边了

所有的盒子都浮动，盒子3 卡到右边了,原理是将盒子1 的高度调整，宽度调整，当盒子3落下来的时候，盒子1下边高度不够，自然就挤到右边去了

效果

代码

.box {float: left;width: 200px;}.box1 {height: 130px;}

四、浮动出现的问题

我们设置3个元素，将元素分别浮动起来，然后在元素后面增加内容，可以看到浮动会影响到后面元素显示，而且父元素的高度不见了

父容器没有高度
浮动后面的元素顶到前面了

问题截图

五、处理浮动的影响

对兄弟元素的影响：后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟
无影响。
对父元素的影响：不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元
素。
1. 方案一：给父元素指定高度。
2. 方案二：给父元素也设置浮动，带来其他影响。
3. 方案三：给父元素设置 overflow:hidden 。
4. 方案四：在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置 clear:both 。
5. 方案五：给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同

页面结构

  <style>.outer {width: 500px;background-color: gray;border: 1px solid black;}.box {width: 100px;height: 100px;border: 1px solid black;background-color: pink;margin: 10px;}.box1,.box2,.box3 {float: left;}</style>
</head>
<body><div class="outer"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div><!-- <div class="box box4">4</div> --></div><div style="background-color: gold;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam rerum illum alias, mollitia blanditiis ducimus, excepturi ipsam ab itaque eius vel dignissimos officia possimus eligendi expedita qui iure optio atque, amet ipsum quis omnis quasi! Veniam iste fugit, ipsa nostrum aut blanditiis quaerat repellat architecto ullam obcaecati magnam dolorem natus itaque vitae illo expedita eligendi corporis? Explicabo consequatur aut eius ab quod autem perspiciatis enim necessitatibus alias velit corrupti dolore nam temporibus cum quis rerum aliquid officiis, sunt maxime quibusdam soluta esse beatae est minus. Fuga, blanditiis cumque! Quae itaque autem nulla magni nesciunt! Rem ipsam, doloribus fugiat vitae deserunt quos, velit at assumenda delectus error laudantium nobis officia voluptatum mollitia. Ullam expedita corrupti aliquid tempore doloribus consequuntur repellat. Architecto, repellendus. Facere molestias in voluptatibus, incidunt, cupiditate veniam ipsam autem totam voluptates temporibus dolore dignissimos rerum dicta ullam iste exercitationem placeat qui officiis! Eius laudantium fugiat molestiae eveniet distinctio, aliquid soluta tempore. Impedit optio maxime ullam voluptas labore molestiae harum nam totam, facilis fugit reprehenderit laborum illum nihil ratione eos soluta excepturi cum ab modi eaque est debitis? Dignissimos nesciunt nemo accusamus aliquid repellendus sed eaque totam culpa aut aspernatur quae architecto veritatis quia perferendis sapiente amet, nostrum minima autem!</div>
</body>

方案1

撑起父元素高度，给父元素增加高度

代码

 .outer {width: 500px;background-color: gray;border: 1px solid black;/* 方案1 给父元素增加高度 */height: 200px;}

效果

初步看起来是解决了，并且后面的元素也不影响，但是如果我们给div3后面增加元素，这个时候就出现问题了；3后面的元素顶到1元素的下边了。

方案2

我们给父元素也设置浮动，这样就撑起来整个父容器的高度了；

带来的问题更严重了，不管后面的父元素的兄弟影响到了，而且3后面的兄弟元素也影响到了

代码

.outer {

width: 500px;

background-color: gray;

border: 1px solid black;

/* 方案1 给父元素增加高度 */

/* height: 150px; */

/* 方案二给父元素设置浮动 */

float: left;

}
效果

方案3

给父元素设置 overflow:hidden 。

代码

.outer {

width: 500px;

background-color: gray;

border: 1px solid black;

/* 方案1 给父元素增加高度 */

/* height: 150px; */

/* 方案二给父元素设置浮动 */

/* float: left; */

/* 方案三有点万能的意味 */

overflow: hidden;

}
效果
总结
看样子是不是貌似觉得这是不是解决了，好像还行，但是有一个更严重的问题，如果在3的后面增加了一个元素4，这个时候4直接都看不到了，4如果是一个正常的元素，没有设置浮动，这个时候直接看不到了
- 使用场景：元素全部浮动可以使用

方案4

在浮动的元素后面增加一个块级元素，如div，不要写内容，然后设置清楚浮动的操作

代码

/* 方案4 设置清浮动操作 */

.box4 {

/* both 为清楚 left 和 right */

clear: both;

}
效果
总结
看效果增加了一个空的div后，然后设置清除浮动，貌似都可以了，后面再增加元素好像也正常了，值得注意的是，如果你将设置的这个元素也浮动后，会造成严重的后果
- 实用场景：被设置清浮动的元素不能自身是浮动的，需要是一个正常的元素
错误演示，清浮动的元素也浮动起来了，且父元素高度也没了

方案5

利用伪元素，给最后一个浮动的元素增加一个content，然后设置块元素，最后清理元素

代码

/* 方案五伪元素 */

.outer::after {

content: ‘’;

display: block;

clear: both;

}
效果
总结
看效果是实现了，如果这个时候在3后面增加一个正常的元素，那么又会出现问题
- 实用场景：元素都是浮动的，不能一个是浮动，一个为正常元素

总结

看了上面5中方案，也没有哪一种是完全能解决的，实际上很多都是规范问题，所以针对此案例做了一个规避总结；

布局中的一个原则：设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动。

六、浮动布局练习

利用浮动布局一个小案例，案例是结合尚硅谷老师讲解的基础练习的

效果图

在这里插入图片描述

具体标注参数

在这里插入图片描述

代码实现

<title>布局小练习</title><style>* {margin: 0;padding: 0;}/* 公共样式 开始*/.leftfix {float: left;}.rightfix {float: right;}.clearfix::after {content: '';display: block;clear: both;}/* 公共样式 结束*/.container {width: 960px;margin: 0 auto;text-align: center;}.logo {width: 200px;}.banner1 {width: 540px;margin:0 10px;}.banner2 {width: 200px;}.logo,.banner1,.banner2 {background-color: #ccc;height: 80px;line-height: 80px;}.menu {height: 30px;background-color: #ccc;margin: 10px 0;}.item1,.item2 {width: 368px;height: 198px;border: 1px solid black;line-height: 198px;margin-right: 10px;}.botton-item {width: 178px;height: 198px;border: 1px solid black;margin-right: 10px;margin-top: 10px;line-height: 198px;}.right-item {width: 198px;height: 128px;border: 1px solid black;line-height: 128px;}.right-item:nth-of-type(2) {margin: 10px 0;}.footer {height: 60px;background-color: #ccc;margin-top: 10px;line-height: 60px;}</style>
</head>
<body><div class="container"><!-- 头部 --><div class="header clearfix"><div class="logo leftfix">logo</div><div class="banner1 leftfix">banner1</div><div class="banner2 leftfix">banner2</div></div><!-- 菜单部分 --><div class="menu">菜单</div><!-- 中间内容部分 --><div class="content clearfix"><!-- 左边栏目部分 --><div class="left leftfix"><!-- 上边部分 --><div class="top clearfix"><div class="item1 leftfix">栏目一</div><div class="item2 leftfix">栏目二</div></div><!-- 下边部分 --><div class="bottom clearfix"><div class="botton-item leftfix">栏目三</div><div class="botton-item leftfix">栏目四</div><div class="botton-item leftfix">栏目五</div><div class="botton-item leftfix">栏目六</div></div></div><div class="right leftfix"><div class="right-item">栏目七</div><div class="right-item">栏目八</div><div class="right-item">栏目九</div></div></div><div class="footer">页脚</div></div>
</body>

七、浮动相关属性总结

CSS 属性	功能	属性值
float	设置浮动	left : 设置左浮动 right : 设置右浮动 none ：不浮动，默认值
clear	清除浮动清除前面兄弟元素浮动元素的响应	left ：清除前面左浮动的影响 right ：清除前面右浮动的影响 both ：清除前面左右浮动的影响

css基础之浮动相关学习

一、浮动基本介绍在最初，浮动是用来实现文字环绕图片效果的，现在浮动是主流的页面布局方式之一。效果/代码图片环绕代码 div {width: 600px;height: 400px;background-color: skyblue;}img {width: 200px;float: right;margin-right: 0.5em;}<…...

编程日记 2025/7/4 22:53:16

告别分库分表，时序数据库 TDengine 解锁燃气监控新可能

达成效果： 从 MySQL 迁移至 TDengine 后，设备数据自动分片，运维更简单。列式存储可减少 50% 的存储占用，单服务器即可支撑全量业务。毫秒级漏气报警响应时间控制在 500ms 以内，提升应急管理效率。新架构支持未来…...

编程日记 2025/7/2 14:40:53

1.3 斐波那契数列模型：LeetCode 746. 使用最小花费爬楼梯

动态规划解最小花费爬楼梯问题：LeetCode 746. 使用最小花费爬楼梯 1. 题目链接 LeetCode 746. 使用最小花费爬楼梯题目要求：给定一个整数数组 cost，其中 cost[i] 是从楼梯第 i 阶向上爬所需支付的费用。你可以从下标 0 或 1 的台阶开始爬&a…...

编程日记 2025/6/28 6:16:13

8.4考研408简单选择排序与堆排序知识点深度解析

考研408「简单选择排序与堆排序」知识点全解析一、简单选择排序 1.1 定义与核心思想简单选择排序（Selection Sort）是一种选择排序算法，其核心思想是： 每趟选择：从待排序序列中选择最小（或最大&#x…...

编程日记 2025/7/4 15:06:33

【个人笔记】用户注册登录思路及实现 springboot+mybatis+redis

基本思路获取验证码接口验证码操作用了com.pig4cloud.plugin的captcha-core这个库。 AccountControl的"/checkCode"接口代码，通过ArithmeticCaptcha生成一张验证码图片，通过text()函数得到验证码的答案保存到变量code，然后把图…...

编程日记 2025/7/3 1:22:55

LiteDB 数据存储与检索效率优化的最佳实践指导

一、引言在当今数字化时代，数据处理和存储变得至关重要。对于小型项目或者嵌入式系统而言，需要一种轻量级、高效且易于使用的数据库解决方案。LiteDB 作为一款嵌入式的 NoSQL 数据库，因其零配置、易于集成等特点，受到了开发者的青睐。然而，若要充分发挥其性能优势，就需…...

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

WEB安全--RCE--RCE的绕过

一、回调函数的绕过（PHP） 1.1、回调函数 1.1.1、原理： 回调函数（Callback Function）指的是将函数名或匿名函数作为参数传递给另一个函数，从而在特定条件下调用该函数。以一个常见的回调函数为例&#…...

编程日记 2025/7/3 5:05:18

uni-app:指引蒙层

组件说明指引蒙层组件：通过id标签，突出对应id中的模块；可以自定义提示词。点击任意位置关闭蒙层效果展示和使用示例切换id之后的效果：代码实现 <template><view class="guide-mask" v-if="showMask" @click="hideMask"&g…...

编程日记 2025/6/29 22:11:03

什么是CMS？常用CMS有哪些？

一、内容管理系统（Content Management System）‌ ‌什么是CMS‌：位于 Web 前端（服务器）和后端办公系统之间的软件系统，用于内容创建、编辑、审批和发布。支持文本、图片、视频、数据库等各类数字内容的管理…...

编程日记 2025/6/28 1:39:23

【Es】基础入门：开启全文搜索的大门

文章目录一、Elasticsearch 是什么二、核心概念解读索引（Index）文档（Document）映射（Mapping）分片（Shard）副本（Replica） 三、基本操作入门安…...

编程日记 2025/7/2 1:29:38

74. Linux设备树详解

一、什么是设备树 1、uboot启动内核用到zImage，imx6ull-alientek-emmc.dtb。bootz 80800000 – 83000000. 80800000 —zImage 83000000—dtb 2、设备树：设备和树。设备树(Device Tree)，将这个词分开就是“设备”和“树”，描述设…...

编程日记 2025/6/30 20:01:43

从责任链模式聊到aware接口

从责任链模式聊到aware接口责任链是什么？ 责任链模式是一种行为型设计模式，将多个对象连接成一条链，并且沿着这条链传递请求，让多个对象都有机会处理这个请求，请求会顺着链传递，直到某个对象处理它为止。…...

编程日记 2025/6/30 1:56:31

在win11 环境下新安装 WSL ubuntu + 换国内镜像源 + ssh + 桌面环境 + Pyhton 环境 + vim 设置插件安装

在win11 环境下新安装 WSL ubuntu ssh gnome 桌面环境 Pyhton 环境 vim 设置插件安装简单介绍详细流程换国内镜像源安装 ssh 桌面环境python 环境vim 设置插件安装简单介绍内容有点长，这里就先简单描述内容了。主要是快速在 Win11 搭建一个 wsl 的 linux 环…...

编程日记 2025/7/2 16:57:27

考研408-数据结构完整代码线性表的链式存储结构 - 单链表

单链表操作详解（C实现） 目录单链表尾插法创建单链表头插法创建删除指定节点按值查找按序号查找插入节点完整代码示例注意事项总结尾插法创建 #include<bits/stdc.h> using namespace std;typedef struct LNode {int data;struct LNode* next;…...

编程日记 2025/7/4 21:33:09

使用Python爬虫获取淘宝App商品详情

在电商领域，获取商品详情数据对于市场分析、竞品研究和用户体验优化至关重要。淘宝作为国内领先的电商平台，提供了丰富的商品资源。虽然淘宝App的数据获取相对复杂，但通过Python爬虫技术，我们可以高效地获取淘宝App商品的详细信息…...

编程日记 2025/6/29 23:33:47

在 VMware Workstation 17 中安装的 Ubuntu 虚拟机无法使用桥接模式

在 VMware Workstation 17 中安装的 Ubuntu 虚拟机无法使用桥接模式时，通常是由于网络配置错误、桥接适配器选择不当或主机网络环境限制导致。以下是详细的排查和解决方法：我采用第一步就解决了问题 1. 检查 VMware 桥接模式配置步骤 1：…...

编程日记 2025/7/4 22:45:34

2025前端八股文终极指南：从高频考点到降维打击的面试突围战

2025前端八股文终极指南：从高频考点到降维打击的面试突围战一、2025前端八股文核心考点重构 1.1 新型响应式系统三连问 Vue3信号式响应性： // 信号式响应性底层实现 const [count, setCount] createSignal(0) effect(() > {console.log("当…...

编程日记 2025/7/3 8:57:56

MIPS-32架构(寄存器堆，指令系统，运算器)

文章目录 0 Preview:寄存器32通用0 $zero1 $at2—3 \$v0-$v14—7 \$a0-$a38—15 \$t0-$t716—23 \$s0-$s724—25 \$t8-$t926—27 \$k0-$k128 $gp29 $sp30 $fp 指令系统运算存储器 0 Preview: MIPS架构有32位版本和64位版本，本文介绍32位版本寄存器正如笔者曾说…...

编程日记 2025/6/30 9:26:25

MySQL数据库和表的操作之SQL语句

🎯 本文专栏：MySQL深入浅出 🚀 作者主页：小度爱学习 MySQL数据库和表的操作关系型数据库，都是遵循SQL语法进行数据查询和管理的。 SQL语句什么是sql SQL：结构化查询语言(Structured Query Language)&…...

编程日记 2025/7/3 17:55:22

Ubuntu在VMware中无法全屏

Ubuntu在VMware中无法全屏方法：安装open-vm-tools 在Ubuntu打开终端： 1.输入： sudo apt-get install open-vm-tools2.安装依赖： sudo apt-get install open-vm*3.重启Ubuntu reboot...

编程日记 2025/6/28 1:31:59

[C++面试] 智能指针面试点（重点）续3

[C面试] RAII资源获取即初始化（重点）-CSDN博客 [C面试] 智能指针面试点（重点）-CSDN博客 [C面试] 智能指针面试点（重点）续1-CSDN博客 [C面试] 智能指针面试点（重点）续2-CSDN博客 …...

编程日记 2025/6/28 3:29:14

借助FastAdmin和uniapp,高效搭建AI智能平台

在数字化办公时代，效率与协作是企业发展的核心竞争力。传统的办公工具虽然功能丰富，但在面对复杂多变的团队协作需求时，往往显得力不从心。为了解决这一痛点，我们推出了一款全新的办公AI平台，它不仅能够满足文字和语音…...

编程日记 2025/7/1 21:03:07

【弹性计算】异构计算云服务和 AI 加速器（四）：FPGA 虚拟化技术

《异构计算云服务和 AI 加速器》系列，共包含以下文章： 异构计算云服务和 AI 加速器（一）：功能特点异构计算云服务和 AI 加速器（二）：适用场景异构计算云服务和 AI 加速器（…...

编程日记 2025/7/3 22:28:14

Unity功能模块一对话系统(5)-完善对话流程及功能

现在我们的文本仍然是单句显示的，这还不是我们想要的效果，本期让我们完善对话流程，并使用SO（ScriptableObject）来进行一段对话序列的配置和动态加载。最终效果功能展示功能一：场景内可根据资源序号ID来…...

编程日记 2025/7/1 13:05:50

Ubuntu 系统中安装 Nginx

步骤 1：更新软件包列表在安装前，先更新系统软件包列表： sudo apt update步骤 2：安装 Nginx 通过 apt 直接安装 Nginx： sudo apt install nginx -y步骤 3：验证安装安装完成后，检查 Nginx …...

编程日记 2025/6/27 17:50:44

Elasticsearch：使用 Azure AI 文档智能解析 PDF 文本和表格数据

作者：来自 Elastic James Williams 了解如何使用 Azure AI 文档智能解析包含文本和表格数据的 PDF 文档。 Azure AI 文档智能是一个强大的工具，用于从 PDF 中提取结构化数据。它可以有效地提取文本和表格数据。提取的数据可以索引到 Elastic Cloud Serve…...

编程日记 2025/7/1 1:18:23

如何编译 px4

DeepSeek-R1满血版回答完成深度思考完成用时27秒，搜索全网29篇资料以下是详细的PX4固件编译教程，综合多平台及常见问题解决方案： 一、环境准备 ‌系统要求‌ ‌Ubuntu 20.04/22.04‌（推荐）或 ‌MacOS 12‌ Windo…...

编程日记 2025/6/30 12:27:38

pycharm2024.1.1版本_jihuo

目录前置： 步骤： step one 下载软件 step two 卸载旧版本 1 卸载软件 2 清除残余 step three 下载补丁 step four 安装2024.1.1版本软件 step five 安装补丁 1 找位置放补丁 2 自动设置环境变量 step six 输入jihuo码前置： 之…...

编程日记 2025/6/28 3:31:05

LLaMA Factory微调后的大模型在vLLM框架中对齐对话模版

LLaMA Factory微调后的大模型Chat对话效果，与该模型使用vLLM推理架构中的对话效果，可能会出现不一致的情况。下图是LLaMA Factory中的Chat的对话下图是vLLM中的对话效果。模型回答不稳定：有一半是对的，有一半是无关的。 1、未…...

编程日记 2025/6/30 20:01:44

Vulnhub:Digitalword.local: FALL靶机渗透

将靶机按照图中连接方式打开，fall在virtualBox中打开信息收集扫描得ip arp-scan -l 扫描端口 nmap -A -T4 -sV -p- 扫描目录 gobuster dir -u http://192.168.117.160 -x php,txt,html -w /usr/share/wordlists/dirbuster/directory-list-2.3-medium.txt 一个一个…...

编程日记 2025/7/4 20:33:15

androidstudio安装完成后创建新的示例项目编译报错解决

项目场景： 提示：这里简述项目相关背景： 安装完成android studio想要编译一个自带的demo项目，没想到一直有编译报错，最后终于搞好了，记录下避免再踩坑。 androidstudio安装完成后创建新的示例项目编译报错…...

编程日记 2025/6/27 2:19:16

C#/.NET/.NET Core技术前沿周刊 | 第 31 期（2025年3.17-3.23）

前言 C#/.NET/.NET Core技术前沿周刊，你的每周技术指南针！记录、追踪C#/.NET/.NET Core领域、生态的每周最新、最实用、最有价值的技术文章、社区动态、优质项目和学习资源等。让你时刻站在技术前沿，助力技术成长与视野拓宽。欢迎投稿、推荐…...

编程日记 2025/7/3 17:55:23

QT 跨平台发布指南

一、Windows 平台发布 1. 使用 windeployqt 工具 windeployqt --release --no-compiler-runtime your_app.exe 2. 需要包含的文件应用程序 .exe 文件 Qt5Core.dll, Qt5Gui.dll, Qt5Widgets.dll 等 Qt 库 platforms/qwindows.dll 插件 styles/qwindowsvistastyle.dll (如果使…...

编程日记 2025/7/2 8:38:32

数制——FPGA

1、定点数定点数的三种表示方式： 原码：符号位绝对值表示方法反码：正数的反码表示与原码表示一致，负数的反码表示除符号位，其他位全都取反补码：正数的补码表示与原码表示一致，负数的补码…...

编程日记 2025/7/4 15:04:59

车载以太网网络测试 -25【SOME/IP-报文格式-1】

1 摘要本专题接着上一专题对SOME/IP进行介绍，主要对SOME/IP报文格式以及定义的字段进行详细介绍，有助于在实际项目过程中对SOME/IP报文的理解。上文回顾： 车载以太网网络测试 -24【SOME/IP概述】 2 SOME/IP-报文格式通过上个专题介绍&a…...

编程日记 2025/6/30 9:26:25

Kubernetes》》k8s》》Replication Controller

RC(Replication Controller) 应用托管在kubernetes之后，kubernetes需要保证应用能够持续运行，这是RC的工作内容，它会确保任何时间kubernetes中都有指定数量的Pod在运行。在此基础上，RC还提供了一些更高级的特性，比如滚…...

编程日记 2025/7/1 4:25:19

力扣HOT100之矩阵：73. 矩阵置零

这道题我没有想到什么好的办法，直接暴力AC了，直接遍历两次矩阵，第一次遍历用两个向量分别记录出现0的行数和列数，第二次遍历就判断当前的元素的行数或者列数是否出现在之前的两个向量中，若出现了就直接置零&#xff0c…...

编程日记 2025/7/2 14:44:18

天锐蓝盾终端安全防护——企业终端设备安全管控

从办公室的台式电脑到员工手中的移动终端，这些设备不仅是工作的得力助手，更是企业数据的重要载体。然而，随着终端设备的广泛使用，安全风险也如影随形。硬件设备使用不当、数据随意传输等问题频发，使得企业数据面临着泄…...

编程日记 2025/7/1 17:59:24

【博客】使用GithubAction自动同步obisidian和hexo仓库

使用Github Action自动同步obisidian和hexo仓库，避免手动操作。本文首发于❄慕雪的寒舍 1. 烦恼先来说说慕雪现在的笔记和博客是怎么管理的吧，我正在使用两套笔记软件思源笔记：私密性高一些，不是博客的笔记都在这里面。由于思…...

编程日记 2025/6/27 9:34:42

UE5学习笔记 FPS游戏制作23 区分敌我，寻找敌对角色

文章目录方法1 tag方法2 变量添加变量和函数防止队友伤害修改Task使用球形检测查找敌人场景面板直接编辑属性方法1 tag 角色蓝图身上有一个tag标签，可以通过标签内容区分队伍通过ActorHasTag判断一个Actor是否有对应的标签方法2 变量添加变量和函数在s…...

编程日记 2025/7/2 21:48:43

ECharts各类炫酷图表/3D柱形图

一、前言最近鸡米花实现了各类的炫酷的图表，有3D柱形图、双边柱形图以及异形柱形图，好了，直接上图： 二、效果图一个个来吧，下面就是代码啦，注意，一下图表展示的宽高均为800px*300px 三、异形横…...

编程日记 2025/7/4 4:33:08

AI基础03-视频数据采集

上篇文章我们学习了图片的数据采集，今天主要了解一下视频数据采集的方法。视频是由一系列图像构成的，其中每一张图片就是一帧。视频数据采集方法通常有自动图像采集和基于处理器的图像采集两种。我们学习一下如何利用python 工具和笔记本计算机摄像头进行…...

编程日记 2025/6/29 12:29:14

docker-compose部署prometheus+grafana+node_exporter+alertmanager规则+邮件告警

目录一.docker-compose文件二.配置文件三.文件层级关系，docker-compose和配置文件位于同级目录四.node_exporter页面json文件五.效果展示 prometheusalertmanager邮件告警 grafana面板效果六.涉及离线包一.docker-compose文件 [rootsulibao prometh…...

编程日记 2025/7/1 4:45:19

CPM：大规模生成式中文预训练语言模型

摘要预训练语言模型（PLMs）已被证明对各种下游自然语言处理（NLP）任务有益。最近，GPT-3 以 1750 亿参数和 570GB 训练数据引起了广泛关注，因为它具备少样本（甚至零样本）学习的能力。…...

编程日记 2025/7/3 12:24:15

k8s scheduler几种扩展方式的关系及区别

网上关于scheduler扩展介绍的文章很多，但都是东说一句西说一嘴，完全没有逻辑性，对于逻辑建构者看着很痛苦，这篇文章不会深入教你怎么扩展，而是教你几种扩展方式的关系和逻辑结构： 目前Kubernetes支持五种方…...

编程日记 2025/7/2 1:35:19

Spring Boot 3.4.3 基于 SpringDoc 2 和 Swagger 3 实现项目接口文档管理

在现代企业级应用开发中，前后端分离已成为主流模式，前端负责界面呈现，后端专注提供 RESTful API 接口。然而，接口文档的编写和维护往往是开发过程中的痛点。Spring Boot 3.4.3 结合 SpringDoc 2 和 Swagger 3，为开发者…...

编程日记 2025/7/2 7:06:41

前端D3.js面试题及参考答案

目录解释 D3.js 中 enter ()、update ()、exit () 的作用及典型应用场景描述数据连接（Data Join）的原理，如何通过 data () 方法实现数据集与 DOM 元素的动态绑定？如何利用 datum () 实现单个元素的数据绑定？与 data () 有何区别？在动态数据更新时，如何通过 merge…...

编程日记 2025/7/4 18:42:19

Docker实现MySQL主从复制配置【简易版】

Docker实现MySQL主从复制配置环境准备安装docker 拉取MySQL 8.0镜像 docker pull mysql:8.0#检查 docker images | grep mysql代码流程由于Mysql8.0的ssl验证十分繁琐，在创建容器的时候一定要禁掉创建自定义网络 docker network create mysql-replication-ne…...

编程日记 2025/7/4 17:08:41

IDEA中打开项目Vue+Vue基本语法

一、IDEA中打开项目 1.IDEA中安装Vue基本插件 2.项目结构项目根目录 node_modules : npm 加载的项目依赖模块 public : 存放静态资源，如图片、视频等。 src : 项目源码目录，包含主要的开发文件。 index.html : 首页入口文件，可以添…...

编程日记 2025/7/4 15:55:06

【深度学习新浪潮】图像修复（Image Inpainting）技术综述：定义、进展与应用展望

本文为精简版，完整技术细节与参考文献可与作者讨论。 1. 图像修复的定义与核心目标图像修复（Image Inpainting）是一种通过算法手段填补图像中缺失区域或移除不需要对象的技术，其核心目标是利用图像上下文信息生成与周围像素一致且视觉自然的内容。该技术通过计算机视觉和…...

编程日记 2025/6/29 22:59:49

一、浮动基本介绍

效果/代码

二、元素浮动后的特点

效果/代码

三、浮动小示列

元素基本结构以及样式

3.1 盒子1右浮动

3.2 盒子1左浮动

3.3 所有的盒子都浮动

3.4 盒子3落下来

3.5 盒子3 落到右边了

四、浮动出现的问题

五、处理浮动的影响

方案1

方案2

方案3

方案4

方案5

总结

六、浮动布局练习

效果图

具体标注参数

代码实现

七、浮动相关属性总结

相关文章：