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

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

news 2026/3/27 12:23:04

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

AutoHotkey实战：5分钟搞定Mac/Windows跨平台快捷键统一（附完整脚本）

AutoHotkey实战&#xff1a;5分钟搞定Mac/Windows跨平台快捷键统一&#xff08;附完整脚本&#xff09; 对于频繁切换Mac和Windows双系统的开发者来说&#xff0c;最令人抓狂的莫过于两种操作系统下完全不同的快捷键体系。特别是Cmd/Ctrl键位的混乱&#xff0c;常常让人在复制粘…...

编程新知 2026/3/27 11:56:20

**发散创新：用Python + ROS2实现多机器人协同路径规划与避障控制**在现代机器人系统中，**

发散创新&#xff1a;用Python ROS2实现多机器人协同路径规划与避障控制 在现代机器人系统中&#xff0c;多机器人协同控制已成为智能仓储、物流配送和工业自动化的核心技术之一。本文将带你深入一个真实可运行的案例——使用 Python 语言结合ROS2&#xff08;Robot Operating…...

编程新知 2026/3/27 10:57:51

SecGPT-14B案例分享：某能源企业OT网络异常通信行为识别过程

SecGPT-14B案例分享&#xff1a;某能源企业OT网络异常通信行为识别过程 1. 引言&#xff1a;当能源网络遭遇“隐形”威胁 想象一下&#xff0c;一家大型能源企业的工业控制系统&#xff08;OT网络&#xff09;正在平稳运行&#xff0c;控制着发电、输电的关键设备。突然&…...

编程新知 2026/3/27 7:56:17

LVGL字体扩展避坑指南：freetype缓存管理导致的内存泄漏问题排查实录

LVGL字体扩展深度解析&#xff1a;如何规避freetype缓存管理中的内存泄漏陷阱 在嵌入式GUI开发中&#xff0c;LVGL结合freetype的动态字体加载功能为多语言支持提供了强大支持&#xff0c;但这也带来了内存管理的复杂性。本文将深入探讨一个典型场景&#xff1a;当项目需要频繁…...

编程新知 2026/3/27 7:34:14

PaddleOCR-VL-1.5：0.9B VLM实现文档解析新SOTA

PaddleOCR-VL-1.5&#xff1a;0.9B VLM实现文档解析新SOTA 【免费下载链接】PaddleOCR-VL-1.5-GGUF 项目地址: https://ai.gitcode.com/paddlepaddle/PaddleOCR-VL-1.5-GGUF 导语&#xff1a;百度飞桨团队推出PaddleOCR-VL-1.5&#xff0c;以0.9B参数量的轻量化视觉语言…...

编程新知 2026/3/27 7:16:12

保姆级教程：在银河麒麟V10桌面版上，用Docker容器化部署SpringBoot + 达梦数据库应用

银河麒麟V10桌面版容器化实战&#xff1a;SpringBoot与达梦数据库的Docker化部署指南 在国产化技术栈日益成熟的今天&#xff0c;将传统应用迁移到容器化环境已成为提升部署效率和系统可移植性的关键路径。银河麒麟V10作为国产操作系统的代表&#xff0c;结合飞腾CPU的硬件生态…...

编程新知 2026/3/27 7:05:27

颠覆式窗口置顶：Topit重新定义Mac多任务处理体验

颠覆式窗口置顶&#xff1a;Topit重新定义Mac多任务处理体验 【免费下载链接】Topit Pin any window to the top of your screen / 在Mac上将你的任何窗口强制置顶 项目地址: https://gitcode.com/gh_mirrors/to/Topit 在数字工作空间爆炸式增长的今天&#xff0c;Mac用…...

编程新知 2026/3/27 6:51:22

4重防护构建安卓安全屏障：APKMirror应用管理全攻略

4重防护构建安卓安全屏障&#xff1a;APKMirror应用管理全攻略 【免费下载链接】APKMirror 项目地址: https://gitcode.com/gh_mirrors/ap/APKMirror 在安卓应用下载的数字丛林中&#xff0c;恶意软件如同潜伏的猎手&#xff0c;时刻准备利用用户对新版本的渴望发起攻击…...

编程新知 2026/3/27 1:54:38

深度解析Windows微信自动化：Wechaty Puppet XP零成本架构设计与实战指南

深度解析Windows微信自动化&#xff1a;Wechaty Puppet XP零成本架构设计与实战指南 【免费下载链接】puppet-xp Wechaty Puppet WeChat Windows Protocol 项目地址: https://gitcode.com/gh_mirrors/pu/puppet-xp 在即时通讯自动化领域&#xff0c;Windows平台微信机器…...

编程新知 2026/3/27 1:42:29

如何通过WechatRealFriends解决微信单向好友检测难题

如何通过WechatRealFriends解决微信单向好友检测难题 【免费下载链接】WechatRealFriends 微信好友关系一键检测&#xff0c;基于微信ipad协议&#xff0c;看看有没有朋友偷偷删掉或者拉黑你 项目地址: https://gitcode.com/gh_mirrors/we/WechatRealFriends 在数字化社…...

编程新知 2026/3/27 1:42:29