如何消除浮动

news2024/9/24 3:24:04

第一种方法:

1、创建一个general.css文件:

@charset "utf-8";

.clearfix:after {content: "";display: block;clear: both;}

/* flex */  

.flex,.flexA,.flexB,.flexC {display: flex;flex-wrap: wrap;}

.flexA {justify-content: space-around;}

.flexB {justify-content: space-between;}

.flexC {justify-content: center;}

/*------------------------------------------------------------

    common

------------------------------------------------------------*/

把这个代码放到里面

2、让他形成全局样式:,在main.js中引入全局样式

 3、使用clearfix就行

 不清除浮动的影响,父类不加高度会坍塌

 如果不清除浮动,不加高度,就会出现塌陷

 清除浮动就要用Clearfix

第二种方法

 给他添加overflow:hidden,一定要给父类元素添加

 这种方法是:缺点是无法溢出浮动

第三种方法

 以后只要把这句话复制一下,那个需要清除浮动直接粘贴就行

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/833884.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Halcon Error 8000 Help file for package ‘system‘ 错误分析

Halcon Error 8000 Help file for package ‘system’ 错误分析 1.系统环境变量确认 变量设置(根据自己版本对应) HALCONARCH HALCONARCH x64-win64HALCONEXAMPLES HALCONEXAMPLES D:\MVTec\HALCON-21.05-Progress\examplesHALCONIMAGES HALCONIMAGES D:\MVTec\HALCON-21.0…

IDEA设置中文 中文插件

IDEA设置中文 中文插件 首先进入idea File --> Setting --> Plugin 输入Chinese 搜索插件 选择下图插件进行install 安装完成后,重启idea即可

深入理解缓存 TLB 原理

今天分享一篇TLB的好文章,希望大家夯实基本功,让我们一起深入理解计算机系统。 TLB 是 translation lookaside buffer 的简称。首先,我们知道 MMU 的作用是把虚拟地址转换成物理地址。 MMU工作原理 虚拟地址和物理地址的映射关系存储在页表…

PHP-简单项目引起的大麻烦--【白嫖项目】

强撸项目系列总目录在000集 PHP要怎么学–【思维导图知识范围】 文章目录 本系列校训本项目使用技术 首页小插曲小插曲完了么?必要的项目知识PHPThinkPHPThinkPHP的MVCThinkTemplateThinkPHP 6和ThinkPHP 5 phpStudy 设置导数据库展示页面数据库表结构项目目录如图…

C++ 用指针处理数组元素

指针加减运算的特点使得指针特别合适于处理存储在一段连续内存空间中的同类数据。而数组恰好是具有一定顺序关系的若干同类型变量的集合体,数组元素的存储在物理上也是连续的,数组名就是数组存储的首地址。这样,便可以使用指针来对数组及其元…

Vue 全局事件总线 Event-Bus

全局事件总线 作用:可以在全局层面上,在任意组件之间相互传递数据。不再局限于父子组件传值,或多层嵌套传值等方式。 使用方式:完全与父子组件传值一致,使用 $on 监听事件,使用 $emit 触发事件&#xff0c…

API测试基础之http协议

http简介: http(超文本传输协议)是一个简单的请求-响应协议,它通常运行在TCP(传输控制协议)之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。请求和响应消息的头以ASCII码形式给出…

Java集合ArrayList详解

ArrayList 类是一个可以动态修改的数组,与普通数组的区别就是它是没有固定大小的限制,我们可以添加或删除元素。 ArrayList 继承了 AbstractList ,并实现了 List 接口。 Java 数组 与 ArrayList 在Java中,我们需要先声明数组的大…

Jmeter教程

目录 安装与配置 一:下载jdk——配置jdk环境变量 二:下载JMeter——配置环境变量 安装与配置 一:下载jdk——配置jdk环境变量 1.新建环境变量变量名:JAVA_HOME变量值:(即JDK的安装路径) 2.编辑Path%J…

Visual Studio 2022的MFC框架——应用程序向导

我是荔园微风,作为一名在IT界整整25年的老兵,今天我们来重新审视一下Visual Studio 2022开发工具下的MFC框架知识。 MFC(Microsoft Foundation Class,微软基础类库)是微软为了简化程序员的开发工作所开发的一套C类的集合&#xf…

Pytest自动化测试框架setup 和 teardown

Pytest - setup 和 teardown 执行用例肯定有些需要前置条件或后置操作,例如前置的用户登陆,后置的清理数据等操作; unittest提供了两种前置(setup、setupClass)和两种后置(teardown、teardownClass&#x…

工业生产数据采集器网关是什么?设备如何现场管理?

在制造业数字化转型的浪潮下,工业生产数据采集成为了提高生产效率和质量的关键环节。工业生产数据采集器网关是一种用于连接工厂设备并采集生产数据的智能设备,具备工业级设计和多种联网方式。其中,HiWoo Box作为一款工业边缘网关&#xff0c…

HCIP入门静态实验

题目及要求 第一步&#xff1a;拓扑的搭建 第二步&#xff1a;路由、IP的配置 r1: <Huawei>sys Enter system view, return user view with CtrlZ. [Huawei]sys r1 [r1]int loop [r1]int LoopBack 0 [r1-LoopBack0]ip add 192.168.1.65 27 [r1-LoopBack0]int loop 1 […

Sorting Layer与Order in Layer

就像是两个数相比&#xff0c;比如34与26&#xff0c;Sorting Layer决定的是十位&#xff0c;而Order in Layer决定的是个位&#xff0c;如果Sorting Layer的级别比较高&#xff0c;则可以忽略Order in Layer的比较&#xff0c;当比较的二者的Sorting Layer级别相同&#xff0c…

RF手机天线仿真介绍(一):金属边框天线和LDS天线

目录 简介LDS天线LDS天线仿真 金属边框天线金属边框天线仿真 简介 最早的手机是外置式天线&#xff0c;从NOKIA开始采用内置式天线&#xff0c;开始采用内置金属片&#xff08;一般是0.1MM厚的不锈钢片冲压而成&#xff09;&#xff0c;随后为降低成本&#xff0c;后来改用FPC…

C++ 数组

**数组是具有一定顺序关系的若干对象的集合体&#xff0c;组成数组的对象称为该数组的元素。**数组元素用数组名与带方括号的下标表示&#xff0c;同一数组的各个元素具有相同的类型。数组可以由除void型以外的任何一种类型构成&#xff0c;构成数组的类型和数组之间的关系&…

全排列、子集、组合、子序列

全排列、子集、组合、子序列 1、全排列①回溯&#xff08;DFS&#xff09;交换法②回溯&#xff08;DFS&#xff09;选择法③ 插入法 2、子集①回溯选择法② 动态规划 ③ 位运算方式组合 1、全排列 全排列&#xff08;Permutation&#xff09;&#xff1a;全排列是指给定一组元…

【漏洞复现】Ruijie RG-BCR860 后台命令执行漏洞(CVE-2023-3450)

文章目录 前言声明一、简介二、漏洞概述三、影响版本四、环境搭建五、漏洞复现六、修复方式 前言 Ruijie RG-BCR860 2.5.13 版本存在操作系统命令注入漏洞&#xff0c;攻击者可通过该漏洞获取服务器敏感信息&#xff0c;导致服务器被沦陷。 声明 请勿利用文章内的相关技术从事…

git删除已经提交的大文件

当你不小心把一个巨大的二进制文件提交到git仓库的时候&#xff0c;此时删除再提交也没有用了&#xff0c;大文件已经在仓库中留底了。另外比如需要删除某个需要保密的文件&#xff0c;都是相同的解决办法。 我本来想着把dll放在三方库里面提交到仓库里&#xff0c;省得在不同…

入门级:路由器配置静态路由

软件&#xff1a;cicso packet tracer 8.0 拓扑图&#xff1a;路由器&#xff1a;Router-PT、连接线&#xff1a;Serial DTE、连接口&#xff1a;Serial口&#xff08;serial是串行口,一般用于连接设备,不能连接电脑&#xff09; 实验步骤&#xff1a; 1、构建拓扑图&#xf…