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语言的基础，包括如何定义变量来存储数据，以及如何利用输入输出流实现程序与用户之间的无缝…...
生成xcframework
打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式，可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...
树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法
树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源： http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作，无需更改相机配置。但是，一…...
多场景 OkHttpClient 管理器 - Android 网络通信解决方案
下面是一个完整的 Android 实现，展示如何创建和管理多个 OkHttpClient 实例，分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...
如何在看板中体现优先级变化
在看板中有效体现优先级变化的关键措施包括：采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中，设置任务排序规则尤其重要，因为它让看板视觉上直观地体…...
-----深度优先搜索（DFS）实现)
c++ 面试题(1)-----深度优先搜索（DFS）实现
操作系统：ubuntu22.04 IDE:Visual Studio Code 编程语言：C11 题目描述 地上有一个 m 行 n 列的方格，从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子，但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...
生成 Git SSH 证书
🔑 1. 生成 SSH 密钥对 在终端（Windows 使用 Git Bash，Mac/Linux 使用 Terminal）执行命令： ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" 参数说明： -t rsa&#x…...
MODBUS TCP转CANopen 技术赋能高效协同作业
在现代工业自动化领域，MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步，这两种通讯协议也正在被逐步融合，形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...
如何为服务器生成TLS证书
TLS（Transport Layer Security）证书是确保网络通信安全的重要手段，它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书，可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...
unix/linux，sudo，其发展历程详细时间线、由来、历史背景
sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...
【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）
升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点，但无自动故障转移能力，Master宕机后需人工切换，期间消息可能无法读取。Slave仅存储数据，无法主动升级为Master响应请求ÿ…...