css浮动及清除浮动副作用的三种解决方法
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浮动及清除浮动副作用的三种解决方法一、浮动定义二、浮动元素设置三、清除浮动副作用方法一四、清除浮动副作用方法二五、清除浮动副作用方法三 一、浮动定义 浮动（Float）是CSS中一种布局技术&…...
图像类别生成数字标签
类别 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,…...
【Python】已解决：SyntaxError: invalid character in identifier
文章目录 一、分析问题背景二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项 已解决：SyntaxError: invalid character in identifier 一、分析问题背景 在Python编程中，SyntaxError: invalid character in identifier是一个常见的编译…...
RDNet实战：使用RDNet实现图像分类任务（一）
论文提出的模型主要基于对传统DenseNet架构的改进和复兴，通过一系列创新设计，旨在提升模型性能并优化其计算效率，提出了RDNet模型。该模型的主要特点和改进点： 1. 强调并优化连接操作（Concatenation） 论文…...
Java小白入门到实战应用教程-介绍篇
writer:eleven 介绍 编程语言介绍 编程语言按照抽象层次和硬件交互的方式划分为低级编程语言和高级编程语言。 低级编程语言更接近计算机硬件层面，通常具有执行效率高的特点，但是由于注重计算机底层交互，所以编程难度相对较大。 高级编程…...
python脚本“文档”撰写——“诱骗”ai撰写“火火的动态”python“自动”脚本文档
“火火的动态”python“自动”脚本文档，又从ai学习搭子那儿“套”来，可谓良心质量👍👍。 (笔记模板由python脚本于2024年07月07日 15:15:33创建，本篇笔记适合喜欢钻研python和页面源码的coder翻阅) 【学习的细节是欢悦…...
若依 / 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…...
移动端Vant-list的二次封装，查询参数重置
Vant-list的二次封装 场景：在写项目需求的时候，移动端有用到vant-list组件。后续需求更新说要对列表数据页加搜索和筛选的功能。发现每次筛选完得在页面内手动重置一次查询参数。不方便，所以封了一层。 二次封装代码 <template><…...
SMU Summer 2024 Contest Round 2
[ABC357C] Sierpinski carpet - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 思路:通过因为图形的生成过程是完全一样的。可以通过递归，不断分形。函数process(x,y,k)定义为以坐标(x,y)为左上角,填充sqrt3(k)级的地毯。 int n; int c[800][800]; 默认全为…...
Qt：11.输入类控件(QLineEdit-单行文本输入控件、QTextEdit-多行文本输入控件、QComboBox-下拉列表的控件)
一、QLineEdit-单行文本输入控件： 1.1QLineEdit介绍： QLineEdit 是 Qt 库中的一个单行文本输入控件，不能换行。允许用户输入和编辑单行文本。 1.2属性介绍： inputMask 设置输入掩码，以限定输入格式。setInputMask(con…...
Qt 音频编程实战项目
一Qt 音频基础知识 QT multimediaQMediaPlayer 类：媒体播放器，主要用于播放歌曲、网络收音 机等功能。QMediaPlaylist 类：专用于播放媒体内容的列表。 二 音频项目实战程序 //版本5.12.8 .proQT core gui QT multimedia greate…...
C#委托事件的实现
1、事件 在C#中事件是一种特殊的委托类型，用于在对象之间提供一种基于观察者模式的通知机制。 1.1、事件的发送方定义了一个委托，委托类型的声明包含了事件的签名，即事件处理器方法的签名。 1.2、事件的订阅者可以通过运算符来注册事件处理器…...
Java策略模式在动态数据验证中的应用
在软件开发中，数据验证是一项至关重要的任务，它确保了数据的完整性和准确性，为后续的业务逻辑处理奠定了坚实的基础。然而，不同的数据来源往往需要不同的验证规则，如何在不破坏代码的整洁性和可维护性的同时࿰…...
【Linux】shell基础知识点（updating）
1.输出重定向2.多命令批量执行（; 、&&、 ||）3.脚本不同方式执行的区别（source、bash、sh、./）4.理解环境变量5.export6.引号的使用last.命令相关 1.输出重定向 3种数据流： stdin：标准输入…...
Python基础练习•二
# ## Python编程入门作业 # # ### 选择题 # 1. 假设等号右侧变量都已知的情况下，下列哪个语句在Python中是⾮法的？（ B ） # A. x y z 1 # B. x (y z 1) # C. x, y y, x # D. x y # 2. 关于Python变量，下列…...
智慧科技照亮水利未来：深入剖析智慧水利解决方案如何助力水利行业实现高效、精准、可持续的管理
目录 一、智慧水利的概念与内涵 二、智慧水利解决方案的核心要素 1. 物联网技术：构建全面感知网络 2. 大数据与云计算：实现数据高效处理与存储 3. GIS与三维可视化：提升决策支持能力 4. 人工智能与机器学习：驱动决策智能化 …...
Vue3学习笔记（n.0）
vue指令之v-for 首先创建自定义组件（practice5.vue）： <!--* 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\…...
基于Spring Boot的在线考试系统
您好！我是专注于计算机技术研究的码农小野。如果您对在线考试系统感兴趣或有相关开发需求，欢迎随时联系我。 开发语言：Java 数据库：MySQL 技术：Spring Boot框架，Java技术 工具：Eclipse&…...
Day65 代码随想录打卡|回溯算法篇---组合总和II
题目（leecode T40）： 给定一个候选人编号的集合 candidates 和一个目标数 target ，找出 candidates 中所有可以使数字和为 target 的组合。 candidates 中的每个数字在每个组合中只能使用 一次 。 注意：解集不能包含…...
C++ 入门03：函数与作用域
往期回顾： C 入门01：初识 C-CSDN博客C 入门02：控制结构和循环-CSDN博客 一、前言 在前面的文章学习中，我们了解了C语言的基础，包括如何定义变量来存储数据，以及如何利用输入输出流实现程序与用户之间的无缝…...
国防科技大学计算机基础课程笔记02信息编码
1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制，因此这个了16进制的数据既可以翻译成为这个机器码，也可以翻译成为这个国标码，所以这个时候很容易会出现这个歧义的情况； 因此，我们的这个国…...
)
Java 语言特性(面试系列2)
一、SQL 基础 1. 复杂查询 （1）连接查询（JOIN） 内连接（INNER JOIN）：返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...
Day131 | 灵神 | 回溯算法 | 子集型 子集
Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣（LeetCode） 思路： 笔者写过很多次这道题了，不想写题解了，大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...
ssc377d修改flash分区大小
1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...
关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案
问题描述：iview使用table 中type: "index",分页之后 ，索引还是从1开始，试过绑定后台返回数据的id, 这种方法可行，就是后台返回数据的每个页面id都不完全是按照从1开始的升序，因此百度了下，找到了…...
基于当前项目通过npm包形式暴露公共组件
1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹，并新增内容 3.创建package文件夹...
跨链模式：多链互操作架构与性能扩展方案
跨链模式：多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈：模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展（H2Cross架构）： 适配层…...
Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式
点一下关注吧！！！非常感谢！！持续更新！！！ 🚀 AI篇持续更新中！（长期更新） 目前2025年06月05日更新到： AI炼丹日志-28 - Aud…...
【决胜公务员考试】求职OMG——见面课测验1
2025最新版！！！6.8截至答题，大家注意呀！ 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:（ B ） A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...
网络编程（UDP编程）
思维导图 UDP基础编程（单播） 1.流程图 服务器：短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...