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语言的基础，包括如何定义变量来存储数据，以及如何利用输入输出流实现程序与用户之间的无缝…...
使用VSCode开发Django指南
使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架，专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用，其中包含三个使用通用基本模板的页面。在此…...
（二）原型模式
原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点： 避免重复初…...
VTK如何让部分单位不可见
最近遇到一个需求，需要让一个vtkDataSet中的部分单元不可见，查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行，是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示，主要是最后一个参数，透明度…...
Android第十三次面试总结（四大 组件基础）
Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成，用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机： onCreate() 调用时机：Activity 首次创建时调用。…...
【Java学习笔记】BigInteger 和 BigDecimal 类
BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点：传参类型必须是类对象 一、BigInteger 1. 作用：适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...
【生成模型】视频生成论文调研
工作清单 上游应用方向：控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...
Webpack性能优化：构建速度与体积优化策略
一、构建速度优化 1、升级Webpack和Node.js 优化效果：Webpack 4比Webpack 3构建时间降低60%-98%。原因： V8引擎优化（for of替代forEach、Map/Set替代Object）。默认使用更快的md4哈希算法。AST直接从Loa…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能
1. 开发环境准备 安装DevEco Studio 3.1： 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK 项目配置： // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...
springboot 日志类切面，接口成功记录日志，失败不记录
springboot 日志类切面，接口成功记录日志，失败不记录 自定义一个注解方法 import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;/***…...
SpringAI实战：ChatModel智能对话全解
一、引言：Spring AI 与 Chat Model 的核心价值 🚀 在 Java 生态中集成大模型能力，Spring AI 提供了高效的解决方案 🤖。其中 Chat Model 作为核心交互组件，通过标准化接口简化了与大语言模型（LLM࿰…...