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

CSS浮动

news 来源：原创 2025/7/18 12:09:52

浮动

可以让块级元素待在一行，紧挨着，没有空格
float：left

  1. 浮动的元素会脱离正常的文档系统，像浮云一样飘起来
  2. 浮动元素后面的正常元素会自动补位
  3. 浮动元素会被父元素的宽高所束缚，所以不算完全的脱离文档流
  4. 当浮动元素的上一行是正常元素时，这个浮动元素只能待在当前行，不能跑到上一行
  5. 左浮动：元素向左跑，会从上一行最右边出来继续跑，直到遇到做浮动元素，紧贴着他
  6. 右浮动：元素向右跑，会从上一行最左边出来继续跑，直到遇到做浮动元素，紧贴着他
        ul{width: 800px;}ul li{float: left;list-style-type: none;list-style-position: inside;padding: 20px;}img{width: 100px;height: 100px;}

    <ul><li><img src="../duck.jpg" alt=""></li><li><img src="../duck.jpg" alt=""></li><li><img src="../duck.jpg" alt=""></li><li><img src="../duck.jpg" alt=""></li><li><img src="../duck.jpg" alt=""></li></ul>

在这里插入图片描述

清除浮动

规定元素哪一侧不能有浮动元素
清理元素左侧的浮动：

   clear: left;

元素右侧无浮动元素，记得考虑页面的加载顺序：

   clear: right;

元素左右侧都无浮动元素：

   clear: both;

父元素高度塌陷

（子元素）li设置了浮动，不能给父元素撑起高度（父元素未设置高度），因而会造成塌陷，如下图所示：
在这里插入图片描述

        ul{width: 800px;border: 1px solid red;}

清除浮动的方法

  1. 给父元素（块级元素）设置高度
  2. 在元素内容之后加一个块级元素，并设置左右两侧都无浮动元素
  3. （不增加元素的前提下）使用伪元素的方法，并将其转化为表格元素
        ul::after{content: "";display: table;clear: both;}

在这里插入图片描述
统一设置，可将其设置为一个类，这样只需要在父元素中引入类名即可：

        .clearfix::after{content: "";display: table;clear: both;}

    <ul class="clearfix"><li><img src="../duck.jpg" alt=""></li><li><img src="../duck.jpg" alt=""></li><li><img src="../duck.jpg" alt=""></li><li><img src="../duck.jpg" alt=""></li><li><img src="../duck.jpg" alt=""></li></ul>

注意：父元素设置有高度时，不用清除浮动

相关文章：

CSS浮动

浮动 可以让块级元素待在一行&#xff0c;紧挨着&#xff0c;没有空格 float&#xff1a;left 浮动的元素会脱离正常的文档系统&#xff0c;像浮云一样飘起来浮动元素后面的正常元素会自动补位浮动元素会被父元素的宽高所束缚&#xff0c;所以不算完全的脱离文档流当浮动元素…...

编程日记 2025/7/18 12:09:52

gitlab 还原合并请求

事情是这样的&#xff1a; 菜鸡从 test 分支切了个名为 pref-art 的分支出来&#xff0c;发布后一机灵&#xff0c;发现错了&#xff0c;于是在本地用 git branch -d pref-art 将该分支删掉了。之后切到了 prod 分支&#xff0c;再切出了一个相同名称的 pref-art 分支出来&…...

编程日记 2025/7/18 9:02:34

【GPT】Coze使用开放平台接口-【8】创建应用

coze 可以用来创建简单的应用啦&#xff0c;这样测试起来会比原本的 Agent 更加方便&#xff0c;我们来看看如何创建一个“语音Real不Real”的应用。这个应用就是来检测语音是否是伪造的&#xff0c;克隆或者是合成的。先看下原本 Agent 的样子&#xff1a; 深度伪造语音检测&a…...

编程日记 2025/7/18 11:38:18

海外盲盒系统开发，助力企业全球化发展

近几年来&#xff0c;在海外市场中&#xff0c;盲盒已经成为了一种新的时尚单品&#xff0c;深受东南亚等海外消费者的喜爱。同时&#xff0c;泡泡玛特在海外的成功也为国内企业提供了发展机遇&#xff0c;盲盒出海具有广阔的发展前景&#xff01;‌ 随着信息技术的快速发展&a…...

编程日记 2025/7/18 11:58:50

pytorch 梯度判断函数介绍

PyTorch 提供了一些函数用于判断当前的梯度计算状态以及张量是否需要梯度。这些函数帮助开发者在训练、推理和调试过程中了解和控制梯度计算行为。 PyTorch 梯度判断函数 1. torch.is_grad_enabled() 功能： 判断当前是否启用了全局的梯度计算状态。返回值： 布尔值，True 表…...

编程日记 2025/7/15 1:32:58

每日一题 367. 有效的完全平方数

367. 有效的完全平方数 低效率法 class Solution { public:bool isPerfectSquare(int num) {if(num 1){return true;}long num1 num;for(int i1;i< num/2;i){if((long)(i)*i num){return true;}}return false;} };二分法 class Solution { public:bool isPerfectSquar…...

编程日记 2025/7/17 18:47:33

图像转换 VM与其他格式互转

目录 前言 图像转换 1.相机取流转VM对应类型图像格式 1.1 相机采图转流程输入和Group输入（ImageBaseData_V2） 1.2 相机采图转图像源SDK输入（ImageBaseData） 1.3 相机采图转模块输入（InputImageData） 1.4 相机采图转算子输入（CmvdImage） 2.Bitmap取图与VM对应图像格式互…...

编程日记 2025/7/14 7:13:54

streamlit、shiny、gradio、fastapi四个web APP平台体验

streamlit、shiny、gradio、fastapi四个web APP平台体验 经常被问的问题就是&#xff1a;web APP平台哪个好&#xff1f;该用哪个&#xff1f;刚开始只有用streamlit和shiny&#xff0c;最近体验了一下gradio和fastapi&#xff0c;今天根据自己的体会尝试着回答一下。 使用R语…...

编程日记 2025/7/15 16:29:19

BootstrapTable处理表格

需求背景 历史项目使用 BootstrapTable 作为前端组件 应客户需要调整&#xff1a; 冻结前四列对于大文本文字显示部分内容&#xff0c;鼠标悬浮显示完整内容 冻结列 1、引入相关CSS,JS CSS <link rel"stylesheet" href"/css/bootstrap.min.css"> …...

编程日记 2025/7/15 14:09:21

家政预约小程序04活动管理表结构设计

目录 1 创建活动表2 创建活动规则表3 创建活动参与记录表总结 为了满足我们日常的营销&#xff0c;我们通常需要搞一些活动&#xff0c;比如满减、折扣、团购等。启动活动后&#xff0c;会在首页进行显示&#xff0c;当用户访问小程序的时候&#xff0c;就可以参与活动&#xf…...

编程日记 2025/7/18 11:50:32

WPF使用OpenCvSharp4

WPF使用OpenCvSharp4 创建项目安装OpenCvSharp4 创建项目 安装OpenCvSharp4 在解决方案资源管理器中&#xff0c;右键单击项目名称&#xff0c;选择“管理 NuGet 包”。搜索并安装以下包&#xff1a; OpenCvSharp4OpenCvSharp4.ExtensionsOpenCvSharp4.runtime.winSystem.Man…...

编程日记 2025/7/14 20:30:18

STM32-笔记23-超声波传感器HC-SR04

一、简介 HC-SR04 工作参数&#xff1a; • 探测距离&#xff1a;2~600cm • 探测精度&#xff1a;0.1cm1% • 感应角度&#xff1a;<15 • 输出方式&#xff1a;GPIO • 工作电压&#xff1a;DC 3~5.5V • 工作电流&#xff1a;5.3mA • 工作温度&#xff1a;-40~85℃ 怎么…...

编程日记 2025/7/12 20:56:19

4G报警器WT2003H-16S低功耗语音芯片方案开发-实时音频上传

一、引言 在当今社会&#xff0c;安全问题始终是人们关注的重中之重。无论是家庭、企业还是公共场所&#xff0c;都需要一套可靠的安全防护系统来保障人员和财产的安全。随着科技的飞速发展&#xff0c;4G 报警器应运而生&#xff0c;为安全防范领域带来了全新的解决方案。…...

编程日记 2025/7/18 12:08:26

机器学习中的欠拟合

当模型不能够准确地表达输入与输出的关系时&#xff0c;就是欠拟合。它在训练集和未见过的数据都会产生高误差率。过度拟合则在训练集表现出低误差率&#xff0c;只有对未见过的数据表现出高误差率。 当模型太过于简单时&#xff0c;它需要更多的训练时间、更多的输入特征、更…...

编程日记 2025/7/14 5:23:21

数据结构之栈和队列

栈的定义&#xff1a; 我们要记住这8个字&#xff0c;先进后出&#xff0c;后进先出 我们对于栈的操作只有两个&#xff0c;进栈和出栈 栈的顺序结构初始化&#xff1a;&#xff08;和顺序表差不多&#xff09; 代码实现&#xff1a; 栈的顺序结构进栈&#xff1a; 代码实现…...

编程日记 2025/7/18 11:58:49

【北京迅为】iTOP-4412全能版使用手册-第六十九章 Linux内核裁剪与定制

iTOP-4412全能版采用四核Cortex-A9&#xff0c;主频为1.4GHz-1.6GHz&#xff0c;配备S5M8767 电源管理&#xff0c;集成USB HUB,选用高品质板对板连接器稳定可靠&#xff0c;大厂生产&#xff0c;做工精良。接口一应俱全&#xff0c;开发更简单,搭载全网通4G、支持WIFI、蓝牙、…...

编程日记 2025/7/14 11:44:19

MF248：复制工作表形状到Word并调整多形状位置

我给VBA的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的工作效率&#xff0c;而且可以提高数据的准确度。“VBA语言専攻”提供的教程一共九套&#xff0c;分为初级、中级、高级三大部分&#xff0c;教程是对VBA的系统讲解&#…...

编程日记 2025/7/17 4:26:06

若依框架之简历pdf文档预览功能

一、前端 &#xff08;1&#xff09;安装插件vue-pdf&#xff1a;npm install vue-pdf &#xff08;2&#xff09;引入方式&#xff1a;import pdf from "vue-pdf"; &#xff08;3&#xff09;components注入方式&#xff1a;components:{pdf} &#xff08;4&…...

编程日记 2025/7/18 12:01:57

常用的数据库类型都有哪些

在Java开发和信息系统架构中&#xff0c;数据库扮演着存储和管理数据的关键角色。数据库种类繁多&#xff0c;各有特色&#xff0c;适用于不同的应用场景。 1. 关系型数据库&#xff08;RDBMS&#xff09;&#xff1a; • 关系型数据库是最为人熟知的数据库类型&#xff0c;数据…...

编程日记 2025/7/15 11:53:00

使用apisix+oidc+casdoor配置微服务网关

一、服务架构图 二、安装配置 1. 安装配置apisix (1). 快速启动及验证&#xff1a; curl -sL https://run.api7.ai/apisix/quickstart | sh该命令启动 apisix-quickstart 和 etcd 两个容器&#xff0c;APISIX 使用 etcd 保存和同步配置。APISIX 和 etcd 容器使用 Docker 的 …...

编程日记 2025/7/15 15:13:14

【系统分析师】- 案例 -数据库特训

目录 1、规范化与逆规范化 2、数据库视图 3、数据库索引 4、SQL优化 5、数据库分区 6、分布式数据库 7、NoSql 8、读写分离&#xff08;主从复制&#xff09; 9、缓存一致性 10、云数据库 11、主题数据库 12、数据同步 1、规范化与逆规范化 规范化&#xff1a; 优点…...

编程日记 2025/7/16 20:49:13

创建型设计模式、结构型设计模式与行为型设计模式 上下文任务通用方案 设计模式 大全

设计模式&#xff08;Design Pattern&#xff09;是一种面向对象编程思想&#xff0c;分为创建型模式、结构型模式与行为型模式三大类&#xff0c;提供在特定上下文中解决常见任务通用方案&#xff0c;旨在让程序&#xff08;软件&#xff09;具有更好特点&#xff0c;如降低耦…...

编程日记 2025/7/18 11:38:18

2412git,gitdiff与编码

原文 除了git命令行工具外,还有其他工具或服务可让你查看git历史记录中的更改.最有趣的是那些按拉请的一部分更改的情况,因为这些是你正在审查和批准的更改. 但一个常见的问题是,它们给你展示的可能不是实际改变的内容. 我把讨论限制在我有经验的服务和工具上,即它是git命令…...

编程日记 2025/7/18 11:46:10

什么是 Git Hooks？

在团队开发中&#xff0c;当成员提交代码的描述信息不符合约定提交规范的时候&#xff0c;需要阻止当前的提交&#xff0c;而要实现这个目的&#xff0c;我们就需要先来了解一个概念&#xff0c;叫做 Git hooks&#xff0c;即Git 在执行某个事件之前或之后进行一些其他额外的操…...

编程日记 2025/7/18 11:56:34

Android中加载一张图片占用的内存

在安卓&#xff08;Android&#xff09;系统中&#xff0c;加载图片占用内存的大小并不是图片本身的大小&#xff0c;比如一张图片大小为100kb&#xff0c;那当他加载到Android上时其占用的内存大小并不是100kb。 加载图片到内存中占用的内存大小取决于多种因素&#xff0c;包括…...

编程日记 2025/7/17 14:46:50

【竞技宝】LOL：IG新赛季分组被质疑

北京时间2024年12月31日&#xff0c;今天已经2024年的最后一天&#xff0c;在进入一月之后&#xff0c;英雄联盟将迎来全新的2025赛季。而目前新赛季第一阶段的抽签结果已经全部出炉&#xff0c;其中人气最高的IG战队在本次抽签中抽到了“绝世好签”引来了网友们的质疑。 首先介…...

编程日记 2025/7/15 18:03:13

智能工厂的设计软件 应用场景的一个例子：为AI聊天工具添加一个知识系统 之12 方案再探之3：特定于领域的模板 之2 首次尝试和遗留问题解决

本文提要 现在就剩下“体”本身的 约定了--这必然是 自律自省的&#xff0c;或者称为“戒律” --即“体”的自我训导discipline。完整表述为&#xff1a; 严格双相的庄严“相” (<head>侧&#xff09;&#xff0c;完全双性的本质“性”&#xff08;<boot>侧&…...

编程日记 2025/7/14 9:25:03

超融合时间节点同步

1. 执行以下命令停止相关进程。 l 节点为主机&#xff0c;执行&#xff1a; perl /opt/galax/gms/common/config/restartCnaProcess.pl l 节点为VRM&#xff0c;执行&#xff1a; sh /opt/omm/ha/module/hacom/script/stop_ha.sh 2. 执行以下命令修改节…...

编程日记 2025/7/18 11:58:50

【分布式文件存储系统Minio】2024.12保姆级教程

文章目录 1.介绍1.分布式文件系统2.基本概念 2.环境搭建1.访问网址2.账号密码都是minioadmin3.创建一个桶4.**Docker安装miniomc突破7天限制**1.拉取镜像2.运行容器3.进行配置1.格式2.具体配置 4.查看桶5.给桶开放权限 3.搭建minio模块1.创建一个oss模块1.在sun-common下创建2.…...

编程日记 2025/7/12 21:30:10

pycharm pytorch tensor张量可视化，view as array

Evaluate Expression 调试过程中&#xff0c;需要查看比如attn_weight 张量tensor的值。 方法一&#xff1a;attn_weight.detach().numpy(),view as array 方法二&#xff1a;attn_weight.cpu().numpy(),view as array...

编程日记 2025/7/16 18:12:47

LeetCode 3219.切蛋糕的最小总开销 II：贪心——先切贵的

【LetMeFly】3219.切蛋糕的最小总开销 II&#xff1a;贪心——先切贵的 力扣题目链接&#xff1a;https://leetcode.cn/problems/minimum-cost-for-cutting-cake-ii/ 有一个 m x n 大小的矩形蛋糕&#xff0c;需要切成 1 x 1 的小块。 给你整数 m &#xff0c;n 和两个数组&…...

编程日记 2025/7/18 11:48:13

【PDF物流单据提取明细】批量PDF提取多个区域内容导出表格或用区域内容对文件改名，批量提取PDF物流单据单号及明细导出表格并改名的技术难点及小节

相关阅读及下载&#xff1a; PDF电子物流单据&#xff1a; 批量PDF提取多个区域局部内容重命名PDF或者将PDF多个局部内容导出表格&#xff0c;具体使用步骤教程和实际应用场景的说明演示https://mp.weixin.qq.com/s/uCvqHAzKglfr40YPO_SyNg?token720634989&langzh_CN扫描…...

编程日记 2025/7/14 19:51:59

Redis到底支不支持事务啊？

大家好&#xff0c;我是锋哥。今天分享关于【Redis到底支不支持事务啊&#xff1f;】面试题。希望对大家有帮助&#xff1b; Redis到底支不支持事务啊&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 Redis 支持事务&#xff0c;但它的事务模型与传统的…...

编程日记 2025/7/18 12:06:39

Druid连接Oracle数据库，连接失效导致SQL无法执行

原始配置&#xff1a; type: com.alibaba.druid.pool.DruidDataSource druid:initial-size: 5max-active: 25min-idle: 5max-wait: 10000testWhileIdle: truetestOnBorrow: falsetestOnReturn: falsetimeBetweenEvictionRunsMillis: 2000minEvictableIdleTimeMillis: 600000ma…...

编程日记 2025/7/18 11:42:04

JVM 及内存管理：掌握 Java 8 的内存模型与垃圾回收机制

Java 虚拟机&#xff08;JVM&#xff09;是运行 Java 程序的核心&#xff0c;它负责代码执行和内存管理。Java 8 引入了一些重要的内存模型和垃圾回收机制优化。本文将详细解析 JVM 的内存模型、垃圾回收机制&#xff0c;并配以相关图解&#xff0c;帮助你深刻理解 JVM 的工作原…...

编程日记 2025/7/18 11:40:56

用户界面的UML建模06

4.1 抽象表示层的结构&#xff08;Abstract Presentation Structure&#xff09; 如图6 所示&#xff0c;抽象表示层模型具有一个顶层的容器&#xff08;container&#xff09;&#xff0c;《apm》AbstractForm&#xff0c;其包含了许多组件&#xff0c;《apm》AbstractCompon…...

编程日记 2025/7/17 20:39:52

HTML——41有序列表

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>有序列表</title></head><body><!--有序列表&#xff1a;--><!--1.列表中各个元素在逻辑上有先后顺序&#xff0c;但不存在一定的级别关系-->…...

编程日记 2025/7/18 11:52:54

REDIS1.0

redis的基础知识&#xff1a; NOsql&#xff1a; not only sql 非关系型数据库&#xff1a;主流的数据库以外&#xff0c;基本上都是nosql 非关系型数据库也有库&#xff0c;库是系统自带的&#xff0c;而且也不需要创建&#xff0c;也不能创建&#xff0c;也无需在裤子创建…...

编程日记 2025/7/17 12:14:05

【HarmonyOS之旅】ArkTS语法(二) -＞ 动态构建UI元素

目录 1 -> Builder 2 -> BuilderParam8 2.1 -> 引入动机 2.2 -> 参数初始化组件 2.3 -> 尾随闭包初始化组件 3 -> Styles 4 -> Extend 5 -> CustomDialog 1 -> Builder 可通过Builder装饰器进行描述&#xff0c;该装饰器可以修饰一个函数&…...

编程日记 2025/7/14 20:13:56

【漫话机器学习系列】028.CP

Mallows’ Cp&#xff1a;标准化公式解析与应用 Mallows’ Cp 是一种常用的模型选择工具&#xff0c;用于在一系列候选模型中权衡拟合度和复杂性&#xff0c;帮助我们选择性能最优的模型。本文将基于其标准化公式展开详细解析&#xff0c;并探讨其应用场景、实现方法、优点与局…...

编程日记 2025/7/18 11:56:35

【SpringBoot教程】搭建SpringBoot项目之编写pom.xml

&#x1f64b;大家好&#xff01;我是毛毛张! &#x1f308;个人首页&#xff1a; 神马都会亿点点的毛毛张 &#x1f44f;今天毛毛张分享的内容主要是Maven 中 pom 文件&#x1f195;&#xff0c;涵盖基本概念、标签属性、配置等内容 文章目录 1.前言&#x1f96d;2.项目基本…...

编程日记 2025/7/16 3:44:46

送给一年编程道路的自己

回望过去一年在编程道路上的成长与收获&#xff0c;是一个很有意义的过程。总结自己这一年的编程经历&#xff0c;不仅可以帮助你更清晰地了解自己的进步和不足&#xff0c;还能为未来的发展指引方向。以下是一些可能的收获&#xff0c;供你参考&#xff1a; 1. 技能提升 语言…...

编程日记 2025/7/18 12:02:55

libvirt学习

文章目录 libvirt 简介节点、Hypervisor和域libvirt 安装和配置libvirt的XML配置文件libvirt APIMain libvirt APIsError handlingSpecial specific APIs 建立到Hypervisor的连接libvirt API使用编译libvirt工具virshvirt-clonevirt-dfvirt-imagevirt-installvirt-topvirt-what…...

编程日记 2025/7/17 22:16:15

第二十五天 项目实践：图像分类

项目实践&#xff1a;图像分类 一、数据集准备 在图像分类任务中&#xff0c;数据集的选择和准备是至关重要的。一个高质量的数据集可以显著提高模型的训练效果和泛化能力。 数据集选择 ImageNet&#xff1a;这是一个广泛应用于训练卷积神经网络&#xff08;CNN&#xff09;模…...

编程日记 2025/7/16 8:49:54

学技术学英文：Tomcat的线程模型调优

导读&#xff1a; tomcat 线程调优关键需要理解下面这几个参数&#xff1a; 1. maxConnections 描述&#xff1a;指定服务器能够同时接受和处理的最大连接数。也就是说&#xff0c;服务器在任何时候都能处理的最大并发连接数。作用&#xff1a;限制服务器在任何给定时间点能…...

编程日记 2025/7/12 16:45:22

软考高项（二十）高级项目管理 ★重点集萃★

&#x1f451; 个人主页 &#x1f451; &#xff1a;&#x1f61c;&#x1f61c;&#x1f61c;Fish_Vast&#x1f61c;&#x1f61c;&#x1f61c; &#x1f41d; 个人格言 &#x1f41d; &#xff1a;&#x1f9d0;&#x1f9d0;&#x1f9d0;说到做到&#xff0c;言出必行&am…...

编程日记 2025/7/13 22:23:31

Android 系统 `android.app.Fragment` 类的深度定制与常见问题解析

Android 系统 android.app.Fragment 类的深度定制与常见问题解析 目录 引言Fragment 概述Fragment 的生命周期Fragment 的系统层深度定制 4.1 Fragment 的创建与初始化4.2 Fragment 的布局与视图4.3 Fragment 的通信机制4.4 Fragment 的动画与过渡4.5 Fragment 的状态保存与恢…...

编程日记 2025/7/15 9:36:54

[Qt] Qt介绍 | 搭建SDK

目录 1. Qt 简介 什么是 Qt&#xff1f; 1.1 引入 1.2 GUI 1.3 Qt 介绍 2. Qt 发展史 3. Qt 支持的平台 4. Qt 版本信息 5. Qt 的优点 6. Qt 应用场景 7. Qt 成功案例 8. Qt 发展前景及就业分析 二. Qt 开发环境搭建 1. 开发工具概述 2.Qt SDK 安装 3.使用 1. …...

编程日记 2025/7/17 13:29:10

工作中常用Vim的命令

Hi, 我是你们的老朋友&#xff0c;主要专注于嵌入式软件开发&#xff0c;有兴趣不要忘记点击关注【码思途远】 目录 0. ctags -R 1.认识 Vim的几种工作模式 2.高频使用命令 2.1 修改文件 2.2 关于行号 2.3 删除多行&#xff0c;删除部分 2.4 复制粘贴 2.5 光标移动 2.…...

编程日记 2025/7/14 23:51:20

【广州计算机学会、广州互联网协会联合主办 | ACM独立出版 | 高录用】第四届大数据、信息与计算机网络国际学术会议（BDICN 2025）

第四届大数据、信息与计算机网络国际学术会议&#xff08;BDICN 2025&#xff09;定于2025年01月10-12日在中国广州举行。会议旨在为从事“大数据”、“计算机网络”与“信息”研究的专家学者、工程技术人员、技术研发人员提供一个共享科研成果和前沿技术&#xff0c;了解学术发…...

编程日记 2025/7/13 9:38:29