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

【CSS系列】第八章 · CSS浮动

news 2025/7/1 19:24:34

写在前面

Hello大家好，我是【麟-小白】，一位软件工程专业的学生，喜好计算机知识。希望大家能够一起学习进步呀！本人是一名在读大学生，专业水平有限，如发现错误或不足之处，请多多指正！谢谢大家！！！

如果小哥哥小姐姐们对我的文章感兴趣，请不要吝啬你们的小手，多多点赞加关注呀！❤❤❤ 爱你们！！！

写在前面

1. 浮动

1.1 浮动的简介

1.2 元素浮动后的特点

1.3 浮动小练习

1.4 解决浮动产生的影响

1.5 浮动布局小练习

1.6 浮动相关属性

结语

【往期回顾】

【CSS系列】第一章 · CSS基础

【CSS系列】第二章 · CSS选择器

【CSS系列】第三章 · CSS三大特性和颜色的表示

【CSS系列】第四章 · CSS字体属性

【CSS系列】第五章 · CSS文本属性

【CSS系列】第六章 · CSS列表、表格、背景、鼠标属性

【CSS系列】第七章 · CSS盒子模型，看这一篇就够了

【其他系列】

【HTML系列】

【Java基础系列】（已更新完）

1. 浮动

1.1 浮动的简介

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

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>01_浮动_简介</title><style>div {width: 600px;height: 400px;background-color: skyblue;}img {width: 200px;float: right;/* margin-right: 0.5em; */}.test::first-letter {font-size: 80px;float: left;}</style>
</head>
<body><div><img src="../images/我的自拍.jpg" alt="">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, minus magnam accusamus eum laborum ducimus possimus beatae fugit illum molestias odit et asperiores adipisci sunt dolorem qui autem enim excepturi alias ab unde temporibus. Sapiente labore a magnam commodi itaque architecto quos doloribus voluptates perferendis rem, earum consectetur. Tempora inventore ducimus veritatis voluptatem deleniti rem laboriosam. Officiis, impedit explicabo! Impedit labore ea et vero rerum nihil in cum qui, itaque blanditiis eius nemo est? Tempora explicabo voluptates consectetur officia aperiam eos impedit veritatis necessitatibus quidem deleniti ea, in odit cum ex harum voluptas, quos eveniet quae voluptate aspernatur quod! Nostrum?</div><hr><div class="test">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat voluptate impedit provident, debitis nostrum cumque iste ab ipsum tempora dicta neque aliquid error in dolorum qui iure. Quibusdam eligendi ea id! Accusamus praesentium vitae quidem iusto placeat provident alias tempore quasi quos, nesciunt rem, molestias quisquam? Quisquam laborum nulla ea veniam, nesciunt, dolores modi officia animi laboriosam minima exercitationem. Reiciendis enim sint at nisi quae obcaecati, vel iusto non libero officia possimus explicabo quis harum inventore sapiente accusantium id quidem cupiditate et expedita maiores perferendis! Reiciendis, distinctio doloribus! Quia harum iste doloremque pariatur obcaecati doloribus quasi iusto minima magnam iure!</div>
</body>
</html>

1.2 元素浮动后的特点

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

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>02_元素浮动后的特点</title><style>.outer {width: 800px;height: 400px;padding: 10px;background-color: gray;text-align: center;}.box {font-size: 20px;padding: 10px;}.box1 {background-color: skyblue;}.box2 {background-color: orange;float: left;/* width: 200px;height: 200px;margin-left: 20px;margin-right: 20px;margin-top: 20px;margin-bottom: 20px; */}.box3 {background-color: green;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>
</body>
</html>

1.3 浮动小练习

练习 1 ：盒子1右浮动，效果如下

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Document</title><style>.outer {width: 500px;background-color: transparent;border: 1px solid black;}.box {margin: 10px;width: 100px;height: 100px;background-color: skyblue;border: 1px solid black;}.box1 {float: right;}</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>
</body>
</html>

练习2：盒子1左浮动，效果如下

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Document</title><style>.outer {width: 500px;background-color: transparent;border: 1px solid black;}.box {margin: 10px;width: 100px;height: 100px;background-color: skyblue;border: 1px solid black;}.box1 {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>
</body>
</html>

练习3：所有盒子都浮动，效果如下

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Document</title><style>.outer {width: 500px;background-color: transparent;border: 1px solid black;}.box {margin: 10px;width: 100px;height: 100px;background-color: skyblue;border: 1px solid black;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>
</body>
</html>

练习4：所有盒子浮动后，盒子3落下来，效果如下

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Document</title><style>.outer {width: 500px;background-color: transparent;border: 1px solid black;}.box {margin: 10px;width: 200px;height: 200px;background-color: skyblue;border: 1px solid black;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>
</body>
</html>

练习5：所有盒子浮动后，盒子3卡住了，效果如下

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Document</title><style>.outer {width: 500px;background-color: transparent;border: 1px solid black;}.box {margin: 10px;width: 200px;height: 200px;background-color: skyblue;border: 1px solid black;float: left;}.box1 {height: 230px;}</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>
</body>
</html>

1.4 解决浮动产生的影响

元素浮动后会有哪些影响

对兄弟元素的影响： 后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响。
对父元素的影响： 不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>04_浮动后的影响</title><style>.outer {width: 500px;background-color: gray;border: 1px solid black;}.box {width: 100px;height: 100px;background-color: skyblue;border: 1px solid black;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><div style="background-color:orange">Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda expedita rem similique at laboriosam, magnam, ipsam inventore odit odio ipsum ex ad beatae quia, consequuntur quam dolore modi atque? Doloribus libero eos ut consequatur, assumenda amet quidem est quae doloremque maxime id cumque explicabo aliquam. Quas, explicabo illo neque rem dolores impedit aspernatur suscipit vel, dolore incidunt totam aliquam laborum! Fuga in rerum repudiandae suscipit, labore optio iste ratione nobis velit dolorem laborum doloribus perferendis porro enim, sequi, delectus nulla quam? Recusandae quidem nobis voluptatum quam quaerat itaque aliquam reiciendis molestias ratione nesciunt exercitationem quisquam laborum sit error magnam optio atque, debitis tempore. Quibusdam repellendus perspiciatis id consequuntur saepe suscipit enim temporibus, ipsa minima dolores laudantium inventore recusandae nam. Quo harum sunt reprehenderit nisi? Error quia quibusdam possimus tempore incidunt. Doloribus vitae quis nisi quod, aperiam molestias id quibusdam voluptate recusandae iure tempore hic doloremque similique corrupti expedita non odit a natus. Eius, harum iste, dolor omnis, saepe dolore illo aliquid impedit officia explicabo itaque dicta eos exercitationem at tempora perspiciatis voluptate ad eaque mollitia maiores obcaecati numquam. Veniam ex facere fugit ullam est velit officiis a autem perferendis ratione aliquid dolor voluptate magnam, illo alias sequi totam, ab nemo?</div>
</body>
</html>

解决浮动产生的影响（清除浮动）

解决方案：

方案一：
- 给父元素指定高度。
方案二：
- 给父元素也设置浮动，带来其他影响。
方案三：
- 给父元素设置 overflow:hidden 。
方案四：
- 在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置 clear:both 。
方案五：
- 给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同。===> 推荐使用

.parent::after {content: "";display: block;clear:both;
}

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

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>05_解决浮动后的影响</title><style>.outer {width: 500px;background-color: gray;border: 1px solid black;/* 第一种解决方案 *//* height: 122px; *//* 第二种解决方案 *//* float: left; *//* 第三种解决方案 *//* overflow: scroll; */}.box {width: 100px;height: 100px;background-color: skyblue;border: 1px solid black;margin: 10px;}.box1,.box2,.box3,.box4 {float: left;}.mofa {/* 第四种解决方案 */clear: both;}/* 第五种解决方案 */.outer::after {content: '';display: block;clear: both;}</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 class="mofa"></div> --></div><div style="background-color:orange">Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda expedita rem similique at laboriosam, magnam, ipsam inventore odit odio ipsum ex ad beatae quia, consequuntur quam dolore modi atque? Doloribus libero eos ut consequatur, assumenda amet quidem est quae doloremque maxime id cumque explicabo aliquam. Quas, explicabo illo neque rem dolores impedit aspernatur suscipit vel, dolore incidunt totam aliquam laborum! Fuga in rerum repudiandae suscipit, labore optio iste ratione nobis velit dolorem laborum doloribus perferendis porro enim, sequi, delectus nulla quam? Recusandae quidem nobis voluptatum quam quaerat itaque aliquam reiciendis molestias ratione nesciunt exercitationem quisquam laborum sit error magnam optio atque, debitis tempore. Quibusdam repellendus perspiciatis id consequuntur saepe suscipit enim temporibus, ipsa minima dolores laudantium inventore recusandae nam. Quo harum sunt reprehenderit nisi? Error quia quibusdam possimus tempore incidunt. Doloribus vitae quis nisi quod, aperiam molestias id quibusdam voluptate recusandae iure tempore hic doloremque similique corrupti expedita non odit a natus. Eius, harum iste, dolor omnis, saepe dolore illo aliquid impedit officia explicabo itaque dicta eos exercitationem at tempora perspiciatis voluptate ad eaque mollitia maiores obcaecati numquam. Veniam ex facere fugit ullam est velit officiis a autem perferendis ratione aliquid dolor voluptate magnam, illo alias sequi totam, ab nemo?</div>
</body>
</html>

1.5 浮动布局小练习

整体效果如下：

具体标注如下：

大家可以自己动手试试把这个页面写出来，然后再看答案

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>06_浮动布局小练习</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 {height: 80px;line-height: 80px;background-color: #ccc;}.menu {height: 30px;background-color: #ccc;margin-top: 10px;line-height: 30px;}.item1,.item2 {width: 368px;height: 198px;line-height: 198px;border: 1px solid black;margin-right: 10px;}.content {margin-top: 10px;}.item3,.item4,.item5,.item6 {width: 178px;height: 198px;line-height: 198px;border: 1px solid black;margin-right: 10px;}.bottom {margin-top: 10px;}.item7,.item8,.item9 {width: 198px;height: 128px;line-height: 128px;border: 1px solid black;}.item8 {margin: 10px 0;}.footer {height: 60px;background-color: #ccc;margin-top: 10px;line-height: 60px;}</style>
</head>
<body><div class="container"><!-- 头部 --><div class="page-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="item3 leftfix">栏目三</div><div class="item4 leftfix">栏目四</div><div class="item5 leftfix">栏目五</div><div class="item6 leftfix">栏目六</div></div></div><!-- 右侧 --><div class="right rightfix"><div class="item7">栏目七</div><div class="item8">栏目八</div><div class="item9">栏目九</div></div></div><!-- 页脚 --><div class="footer">页脚</div></div>
</body>
</html>

1.6 浮动相关属性

结语

本人会持续更新文章的哦！希望大家一键三连，你们的鼓励就是作者不断更新的动力

【CSS系列】第八章 · CSS浮动

写在前面 Hello大家好， 我是【麟-小白】，一位软件工程专业的学生，喜好计算机知识。希望大家能够一起学习进步呀！本人是一名在读大学生，专业水平有限，如发现错误或不足之处，请多多指正&#xff0…...

编程日记 2023/5/21 4:30:47

janus videoroom 对接freeswitch conference 篇1

janus videoroom 实时性非常好， freeswitch conference的功能也很多 ，有没办法集成到一块呢让很多sip 视频终端也能显示到videoroom 里面， 实现方式要不两种 1.改源码实现 （本文忽略难度高） 2.找一个videoroom管…...

编程日记 2023/5/21 4:25:47

cs109-energy+哈佛大学能源探索项目 Part-2.1（Data Wrangling）

博主前期相关的博客见下： cs109-energy哈佛大学能源探索项目 Part-1（项目背景） 这次主要讲数据的整理。 Data Wrangling 数据整理在哈佛的一些大型建筑中，有三种类型的能源消耗，电力，冷冻水和蒸汽。冷冻…...

编程日记 2023/5/21 4:20:45

__101对称二叉树------进阶：你可以运用递归和迭代两种方法解决这个问题吗？---本题还没用【迭代】去实现

101对称二叉树原题链接：完成情况：解题思路：参考代码： 原题链接： 101. 对称二叉树 https://leetcode.cn/problems/symmetric-tree/ 完成情况： 解题思路： 递归的难点在于：找到可以…...

编程日记 2023/5/21 4:15:44

怎么取消只读模式？硬盘进入只读模式怎么办？

案例：电脑磁盘数据不能修改怎么办？ 【今天工作的时候，我想把最近的更新的资料同步到电脑上的工作磁盘，但是发现我无法进行此操作，也不能对磁盘里的数据进行改动。有没有小伙伴知道这是怎么一回事？】在使…...

编程日记 2023/5/21 4:10:42

如何使用Java生成Web项目验证码

使用Java编写Web项目验证码验证码是Web开发中常用的一种验证方式，可以防止机器恶意攻击。本文将介绍如何使用Java编写Web项目验证码，包括步骤、示例和测试。步骤 1. 添加依赖首先需要在项目中添加以下依赖： <dependency><groupId>com.google.code.kaptc…...

编程日记 2023/5/21 4:05:41

【读书笔记】《亲密关系》

作者：美国的罗兰米勒刚拿到这本书的时候，就被最后将近100页的参考文献折服了，让我认为这本书极具专业性。作者使用了14章，从人与人之间是如何相互吸引的，讲到如何相处与沟通，后又讲到如何面对冲突与解决矛…...

编程日记 2023/5/21 4:00:40

面试季，真的太狠了...

金三银四面试季的复盘，真的太狠了… 面试感受先说一个字是真的 “ 累 ” 安排的太满的后果可能就是一天只吃一顿饭，一直奔波在路上不扯这个了，给大家说说面试吧，我工作大概两年多的时间，大家可以参考下在整个面…...

编程日记 2023/5/21 3:55:39

2023年十大最佳黑客工具！

用心做分享，只为给您最好的学习教程如果您觉得文章不错，欢迎持续学习在今年根据实际情况，结合全球黑客共同推崇，选出了2023年十大最佳黑客工具。每一年，我都会持续更新，并根据实际现实情况随时更改…...

编程日记 2023/5/21 3:50:38

每日练习---C语言

目录前言： 1.打印菱形 1.1补充练习 2.打印水仙花 2.1补充训练前言： 记录博主做题的收获，以及提升自己的代码能力，今天写的题目是：打印菱形、打印水仙花数。 1.打印菱形我们先看到牛客网的题：OJ链…...

编程日记 2023/5/21 3:45:37

边缘计算如何推动物联网的发展

随着物联网（IoT）的快速发展，物联网设备数量呈现爆炸性增长，这给网络带来了巨大的压力和挑战。边缘计算作为一种新兴的计算模式，旨在解决数据处理和通信在网络传输中的延迟和带宽限制问题，从而提高数据处理效…...

编程日记 2023/5/21 3:40:36

第五章栈与队列

目录一、用栈实现队列二、用队列实现栈三、有效的括号四、删除字符串中的所有相邻重复项五、逆波兰表达式求值六、滑动窗口最大值七、前 K 个高频元素一、用栈实现队列 Leetcode 232 class MyQueue { public:stack<int> in, out;MyQueue() {}void push(int x) {in.pu…...

编程日记 2023/5/21 3:35:30

PyQt5桌面应用开发（16）：定制化控件-QPainter绘图

本文目录 PyQt5桌面应用系列画画图，喝喝茶QPainter和QPixmapQPixmapQPainter绘制事件一个魔改的QLabelCanvas类主窗口主程序： 总结 PyQt5桌面应用系列 PyQt5桌面应用开发（1）：需求分析 PyQt5桌面应用开发（2…...

编程日记 2023/5/21 3:30:29

spring5源码篇(9)——mybatis-spring整合原理

spring-framework 版本：v5.3.19 spring和mybatis的整合无非主要就是以下几个方面： 1、SqlSessionFactory怎么注入？ 2、Mapper代理怎么注入？ 3、为什么要接管mybatis事务？ 文章目录一、SqlSessionFactory怎么注入SqlSe…...

编程日记 2023/5/21 3:25:28

为什么需要防雷接地，防雷接地的作用是什么

为什么需要电气接地？ 您是否曾经在工作条件下使用任何电器时接触过电击？几乎每个人的答案都是肯定的，有时这些电击是轻微的，但有时会对电气和电子设备造成损坏，并可能危及生命。为防止对人的生命和电器造成任何损害&a…...

编程日记 2023/5/21 3:20:27

如何应用金字塔模型提高结构化表达能力

看一下结构化表达的定义： 结构化表达：是基于结构化思维，理清事物整理与部分之间关系、换位思考后，进行简洁、清晰和有信服力的表达，是一种让受众听得明白、记得清楚、产生认同的精益沟通方式。结构化表达的基本原则是…...

编程日记 2023/5/21 3:15:21

2023年系统分析师考前几页纸

企业战略规划是用机会和威胁评价现在和未来的环境，用优势和劣势评价企业现状，进而选择和确定企业的总体和长远目标，制定和抉择实现目标的行动方案。信息系统战略规划关注的是如何通过该信息系统来支撑业务流程的运作，进而实现企业的关键业务目标，其重点在于对信息系统远景…...

编程日记 2023/5/21 3:10:20

openwrt-安装NGINX

openwrt-安装NGINX 介绍 OpenWrt 是一个用于嵌入式设备的开源操作系统。它基于 Linux 内核，并且主要被设计用于路由器和网络设备。 OpenWrt 的主要特点包括： 完全可定制：OpenWrt 提供了一个完全可写的文件系统，用户可以自定义设…...

编程日记 2023/5/21 3:05:14

Linux安装MongoDB数据库并内网穿透在外远程访问

文章目录前言1.配置Mongodb源2.安装MongoDB数据库3.局域网连接测试4.安装cpolar内网穿透5.配置公网访问地址6.公网远程连接7.固定连接公网地址8.使用固定公网地址连接转发自CSDN cpolarlisa的文章：Linux服务器安装部署MongoDB数据库 - 无公网IP远程连接「内网穿透…...

编程日记 2023/5/21 3:00:13

flutter系列之:使用AnimationController来控制动画效果

文章目录简介构建一个要动画的widget让图像动起来总结简介之前我们提到了flutter提供了比较简单好用的AnimatedContainer和SlideTransition来进行一些简单的动画效果，但是要完全实现自定义的复杂的动画效果，还是要使用AnimationController。今天我…...

编程日记 2023/5/31 18:24:29

龙虎榜——20250610

上证指数放量收阴线，个股多数下跌，盘中受消息影响大幅波动。深证指数放量收阴线形成顶分型，指数短线有调整的需求，大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技代表标的：御银股份、雄帝科技驱动…...

编程新知 2025/7/1 4:28:17

synchronized 学习

学习源： https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景不超卖，也要考虑性能问题（场景） 2.常见面试问题： sync出…...

编程新知 2025/6/21 18:22:44

R语言AI模型部署方案：精准离线运行详解

R语言AI模型部署方案：精准离线运行详解一、项目概述本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

编程新知 2025/6/15 6:20:40

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录第一章概述第二章弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制第三章主要定义 …...

编程新知 2025/6/21 8:38:45

抖音增长新引擎：品融电商，一站式全案代运营领跑者

抖音增长新引擎：品融电商，一站式全案代运营领跑者在抖音这个日活超7亿的流量汪洋中，品牌如何破浪前行？自建团队成本高、效果难控；碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

编程新知 2025/6/25 7:42:59

第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代，智能代理（agents）不再是孤立的个体，而是能够像一个数字团队一样协作。然而，当前 AI 生态系统的碎片化阻碍了这一愿景的实现，导致了“AI 巴别塔问题”——不同代理之间…...

编程新知 2025/6/19 14:18:18

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

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

编程新知 2025/6/20 15:31:23

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接：3403. 从盒子中找出字典序最大的字符串 I 代码如下： class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

编程新知 2025/6/21 22:11:13

SpringCloudGateway 自定义局部过滤器

场景： 将所有请求转化为同一路径请求（方便穿网配置）在请求头内标识原来路径，然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

编程新知 2025/6/26 22:36:32

C# 求圆面积的程序（Program to find area of a circle）

给定半径r，求圆的面积。圆的面积应精确到小数点后5位。例子： 输入：r 5 输出：78.53982 解释：由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982，因为我们只保留小数点后 5 位数字。输…...

编程新知 2025/6/26 3:00:40

写在前面

1. 浮动

1.1 浮动的简介

1.2 元素浮动后的特点

1.3 浮动小练习

1.4 解决浮动产生的影响

1.5 浮动布局小练习

1.6 浮动相关属性

结语

相关文章：