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

css浮动及清除浮动副作用的三种解决方法

news 2025/9/17 11:55:07

css浮动及清除浮动副作用的三种解决方法

文章目录

  • css浮动及清除浮动副作用的三种解决方法
    • 一、浮动定义
    • 二、浮动元素设置
    • 三、清除浮动副作用方法一
    • 四、清除浮动副作用方法二
    • 五、清除浮动副作用方法三

一、浮动定义

浮动（Float）是CSS中一种布局技术，用于使元素沿其容器的左侧或右侧浮动，并允许文本和内联元素围绕它。浮动的常见应用是在创建多列布局或在文本中插入图片时。

理解：浮动可以帮助我们更好进行页面排版，使原本竖着排列的盒子可以横向排列起来。

二、浮动元素设置

1、使用 float 属性可以将元素向左或向右浮动。例如，float: left; 将使元素向左浮动，允许其他内容环绕其右侧。

			.myclass1{width: 50%;float: left;}

2、浮动的副作用：因为浮动会使元素脱离了标准的文档流，从而导致父级元素无法被撑开。

3、浮动的清除： 当一个元素浮动后，其父元素的高度将不再自动扩展以适应浮动元素的高度。这时需要清除浮动 。

理解：想将盒子向左或右排列，就需要使用浮动，但浮动会导致父级元素被撑开管不住子级元素，就需要方法清除这个副作用。

三、清除浮动副作用方法一

对父级元素设置适合CSS高度

这里使用类选择器选中父级div,用id选择器选择两个子级div，并分别增加样式，最后给子级div增加向左浮动样式。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.Myclass{border: blue 3px solid;}#box01{width: 50px;height: 50px;border: red 2px solid;float: left;}#box02{width: 50px;height: 50px;border: green 2px solid;float: left;}</style></head><body><div class="Myclass"><div id="box01"></div><div id="box02"></div></div></body>
</html>

浮动副作用如图所示：

在这里插入图片描述

解决方法：对父级元素设置适合高度样式清除浮动， 这里对父级div设置一定高度即可，父级div需要大于子级div的高度即可，这里我们知道内容高度是50PX+上下边框为2px，这样具体父级高度为52px

.Myclass{height: 52px;border: blue 3px solid;}

效果如图：
在这里插入图片描述

四、清除浮动副作用方法二

使用clear:both清除浮动副作用

同上，分别给父级div和子级div增加样式，并给子级div增加向左浮动样式。

解决方法：添加空盒子

在被浮动的元素后面，添加一个空的div，并且设置一个clear类，并付给该div一个clear：both就可清除浮动副作用。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.Myclass{border: blue 3px solid;}#box01{width: 50px;height: 50px;border: red 2px solid;float: left;}#box02{width: 50px;height: 50px;border: green 2px solid;float: left;}.clear{clear: both;}</style></head><body><div class="Myclass"><div id="box01"></div><div id="box02"></div><!--这里加一个空盒子用于清除浮动--><div class="clear"></div></div></body>
</html>

效果如图：

在这里插入图片描述

五、清除浮动副作用方法三

给父级div定义 overflow:hidden

同上，分别给父级div和子级div增加样式，并给子级div增加向左浮动样式。

解决方法： 对父级CSS选择器加overflow:hidden样式，可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.Myclass{border: blue 3px solid;overflow: hidden;}#box01{width: 50px;height: 50px;border: red 2px solid;float: left;}#box02{width: 50px;height: 50px;border: green 2px solid;float: left;}</style></head><body><div class="Myclass"><div id="box01"></div><div id="box02"></div></div></body>
</html>

效果如图：

在这里插入图片描述

相关文章：

css浮动及清除浮动副作用的三种解决方法

css浮动及清除浮动副作用的三种解决方法 文章目录 css浮动及清除浮动副作用的三种解决方法一、浮动定义二、浮动元素设置三、清除浮动副作用方法一四、清除浮动副作用方法二五、清除浮动副作用方法三 一、浮动定义 浮动&#xff08;Float&#xff09;是CSS中一种布局技术&…...

编程日记 2024/7/10 0:42:55

图像类别生成数字标签

类别 COCO 2017数据集分类标签。coco2017数据集下载。 cls [background, person, bicycle, car, motorcycle, airplane, bus,train, truck, boat, traffic light, fire hydrant,stop sign, parking meter, bench, bird, cat, dog,horse, sheep, cow, elephant, bear, zebra,…...

编程日记 2024/7/10 0:40:53

【Python】已解决：SyntaxError: invalid character in identifier

文章目录 一、分析问题背景二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项 已解决&#xff1a;SyntaxError: invalid character in identifier 一、分析问题背景 在Python编程中&#xff0c;SyntaxError: invalid character in identifier是一个常见的编译…...

编程日记 2024/7/10 0:39:52

RDNet实战：使用RDNet实现图像分类任务（一）

论文提出的模型主要基于对传统DenseNet架构的改进和复兴&#xff0c;通过一系列创新设计&#xff0c;旨在提升模型性能并优化其计算效率&#xff0c;提出了RDNet模型。该模型的主要特点和改进点&#xff1a; 1. 强调并优化连接操作&#xff08;Concatenation&#xff09; 论文…...

编程日记 2024/7/10 0:37:50

Java小白入门到实战应用教程-介绍篇

writer:eleven 介绍 编程语言介绍 编程语言按照抽象层次和硬件交互的方式划分为低级编程语言和高级编程语言。 低级编程语言更接近计算机硬件层面&#xff0c;通常具有执行效率高的特点&#xff0c;但是由于注重计算机底层交互&#xff0c;所以编程难度相对较大。 高级编程…...

编程日记 2024/7/10 0:36:48

python脚本“文档”撰写——“诱骗”ai撰写“火火的动态”python“自动”脚本文档

“火火的动态”python“自动”脚本文档&#xff0c;又从ai学习搭子那儿“套”来&#xff0c;可谓良心质量&#x1f44d;&#x1f44d;。 (笔记模板由python脚本于2024年07月07日 15:15:33创建&#xff0c;本篇笔记适合喜欢钻研python和页面源码的coder翻阅) 【学习的细节是欢悦…...

编程日记 2024/7/10 0:35:46

若依 / ruoyi-ui：执行yarn dev 报错 esnext.set.difference.v2.js in ./src/utils/index.js

一、报错信息 These dependencies were not found: * core-js/modules/esnext.set.difference.v2.js in ./src/utils/index.js * core-js/modules/esnext.set.intersection.v2.js in ./src/utils/index.js * core-js/modules/esnext.set.is-disjoint-from.v2.js in ./src/utils…...

编程日记 2024/7/10 0:31:41

移动端Vant-list的二次封装，查询参数重置

Vant-list的二次封装 场景&#xff1a;在写项目需求的时候&#xff0c;移动端有用到vant-list组件。后续需求更新说要对列表数据页加搜索和筛选的功能。发现每次筛选完得在页面内手动重置一次查询参数。不方便&#xff0c;所以封了一层。 二次封装代码 <template><…...

编程日记 2024/7/10 0:30:39

SMU Summer 2024 Contest Round 2

[ABC357C] Sierpinski carpet - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 思路:通过因为图形的生成过程是完全一样的。可以通过递归&#xff0c;不断分形。函数process(x,y,k)定义为以坐标(x,y)为左上角,填充sqrt3(k)级的地毯。 int n; int c[800][800]; 默认全为…...

编程日记 2024/7/10 0:29:38

Qt：11.输入类控件(QLineEdit-单行文本输入控件、QTextEdit-多行文本输入控件、QComboBox-下拉列表的控件)

一、QLineEdit-单行文本输入控件&#xff1a; 1.1QLineEdit介绍&#xff1a; QLineEdit 是 Qt 库中的一个单行文本输入控件&#xff0c;不能换行。允许用户输入和编辑单行文本。 1.2属性介绍&#xff1a; inputMask 设置输入掩码&#xff0c;以限定输入格式。setInputMask(con…...

编程日记 2024/7/10 0:28:37

Qt 音频编程实战项目

一Qt 音频基础知识 QT multimediaQMediaPlayer 类&#xff1a;媒体播放器&#xff0c;主要用于播放歌曲、网络收音 机等功能。QMediaPlaylist 类&#xff1a;专用于播放媒体内容的列表。 二 音频项目实战程序 //版本5.12.8 .proQT core gui QT multimedia greate…...

编程日记 2024/7/10 0:27:36

C#委托事件的实现

1、事件 在C#中事件是一种特殊的委托类型&#xff0c;用于在对象之间提供一种基于观察者模式的通知机制。 1.1、事件的发送方定义了一个委托&#xff0c;委托类型的声明包含了事件的签名&#xff0c;即事件处理器方法的签名。 1.2、事件的订阅者可以通过运算符来注册事件处理器…...

编程日记 2024/7/10 0:25:33

Java策略模式在动态数据验证中的应用

在软件开发中&#xff0c;数据验证是一项至关重要的任务&#xff0c;它确保了数据的完整性和准确性&#xff0c;为后续的业务逻辑处理奠定了坚实的基础。然而&#xff0c;不同的数据来源往往需要不同的验证规则&#xff0c;如何在不破坏代码的整洁性和可维护性的同时&#xff0…...

编程日记 2024/7/10 0:24:32

【Linux】shell基础知识点（updating）

1.输出重定向2.多命令批量执行&#xff08;; 、&&、 ||&#xff09;3.脚本不同方式执行的区别&#xff08;source、bash、sh、./&#xff09;4.理解环境变量5.export6.引号的使用last.命令相关 1.输出重定向 3种数据流&#xff1a; stdin&#xff1a;标准输入&#xf…...

编程日记 2024/7/10 0:23:31

Python基础练习•二

# ## Python编程入门作业 # # ### 选择题 # 1. 假设等号右侧变量都已知的情况下&#xff0c;下列哪个语句在Python中是⾮法的&#xff1f;&#xff08; B &#xff09; # A. x y z 1 # B. x (y z 1) # C. x, y y, x # D. x y # 2. 关于Python变量&#xff0c;下列…...

编程日记 2024/7/10 0:22:30

智慧科技照亮水利未来：深入剖析智慧水利解决方案如何助力水利行业实现高效、精准、可持续的管理

目录 一、智慧水利的概念与内涵 二、智慧水利解决方案的核心要素 1. 物联网技术&#xff1a;构建全面感知网络 2. 大数据与云计算&#xff1a;实现数据高效处理与存储 3. GIS与三维可视化&#xff1a;提升决策支持能力 4. 人工智能与机器学习&#xff1a;驱动决策智能化 …...

编程日记 2024/7/10 0:21:29

Vue3学习笔记（n.0）

vue指令之v-for 首先创建自定义组件&#xff08;practice5.vue&#xff09;&#xff1a; <!--* Author: RealRoad1083425287qq.com* Date: 2024-07-05 21:28:45* LastEditors: Mei* LastEditTime: 2024-07-05 21:35:40* FilePath: \Fighting\new_project_0705\my-vue-app\…...

编程日记 2024/7/10 0:20:28

基于Spring Boot的在线考试系统

您好&#xff01;我是专注于计算机技术研究的码农小野。如果您对在线考试系统感兴趣或有相关开发需求&#xff0c;欢迎随时联系我。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;Spring Boot框架&#xff0c;Java技术 工具&#xff1a;Eclipse&…...

编程日记 2024/7/10 0:19:28

Day65 代码随想录打卡|回溯算法篇---组合总和II

题目&#xff08;leecode T40&#xff09;&#xff1a; 给定一个候选人编号的集合 candidates 和一个目标数 target &#xff0c;找出 candidates 中所有可以使数字和为 target 的组合。 candidates 中的每个数字在每个组合中只能使用 一次 。 注意&#xff1a;解集不能包含…...

编程日记 2024/7/10 0:18:26

C++ 入门03：函数与作用域

往期回顾&#xff1a; C 入门01&#xff1a;初识 C-CSDN博客C 入门02&#xff1a;控制结构和循环-CSDN博客 一、前言 在前面的文章学习中&#xff0c;我们了解了C语言的基础&#xff0c;包括如何定义变量来存储数据&#xff0c;以及如何利用输入输出流实现程序与用户之间的无缝…...

编程日记 2024/7/10 0:17:25

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

编程新知 2025/8/10 5:27:29

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

编程新知 2025/9/11 12:54:55

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

编程新知 2025/8/8 2:13:29

多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

编程新知 2025/7/23 3:55:49

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

编程新知 2025/9/12 8:21:45

AirSim/Cosys-AirSim 游戏开发（四）外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机&#xff0c;因为在使用过程中发现 Airsim 对外部监控相机的描述模糊&#xff0c;而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置&#xff0c;最后在源码示例中找到了&#xff0c;所以感…...

编程新知 2025/9/6 0:31:52

Git常用命令完全指南：从入门到精通

Git常用命令完全指南&#xff1a;从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...

编程新知 2025/7/11 0:32:35

深入理解Optional：处理空指针异常

1. 使用Optional处理可能为空的集合 在Java开发中&#xff0c;集合判空是一个常见但容易出错的场景。传统方式虽然可行&#xff0c;但存在一些潜在问题&#xff1a; // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...

编程新知 2025/9/3 13:51:02

HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力：训练时既扩散也回归，但推理时则扩散

前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说&#xff0c;在叠衣服的过程中&#xff0c;我会带着团队对比各种模型、方法、策略&#xff0c;毕竟针对各个场景始终寻找更优的解决方案&#xff0c;是我个人和我司「七月在线」的职责之一 且个人认为&#xff0c…...

编程新知 2025/9/6 22:29:50

简单介绍C++中 string与wstring

在C中&#xff0c;string和wstring是两种用于处理不同字符编码的字符串类型&#xff0c;分别基于char和wchar_t字符类型。以下是它们的详细说明和对比&#xff1a; 1. 基础定义 string 类型&#xff1a;std::string 字符类型&#xff1a;char&#xff08;通常为8位&#xff09…...

编程新知 2025/8/12 17:27:31