如何消除浮动

简介: 如何消除浮动

第一种方法:

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,一定要给父类元素添加

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

第三种方法

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

相关文章
|
7天前
|
前端开发
除了伪元素清除法,还有哪些方法可以解决浮动布局的高度塌陷问题
【10月更文挑战第27天】不同的方法适用于不同的场景和布局需求,在实际开发中,需要根据具体情况选择最合适的方法来解决浮动布局的高度塌陷问题。
|
7天前
|
JavaScript 前端开发
伪元素清除法会影响页面性能吗?
【10月更文挑战第27天】伪元素清除法在正常使用情况下对页面性能的影响不大,是一种较为高效和常用的清除浮动的方法。但在实际应用中,仍需要结合页面的具体情况和其他相关技术的使用来综合考虑性能优化问题,以确保页面能够达到最佳的性能表现。
|
2月前
|
小程序
小程序消除图片下边距的三个方法
小程序消除图片下边距的三个方法
47 11
|
3月前
|
前端开发 JavaScript 开发者
告别居中难题!揭秘未知宽高元素如何轻松实现水平和垂直居中的神奇技巧!
【8月更文挑战第23天】本文介绍了在Web前端开发中实现未知宽度和高度元素的水平垂直居中的四种方法:使用Flexbox布局、Grid布局、绝对定位结合transform属性以及利用负margin。每种方法均提供了示例代码,帮助开发者根据不同场景和兼容性需求选择最合适的解决方案,从而轻松应对各种居中布局需求。
34 1
|
3月前
|
前端开发
HTML+CSS基础知识(5)相对定位、绝对定位、固定定位
这篇文章介绍了HTML和CSS中的三种定位方式:相对定位、绝对定位和固定定位,并通过代码示例展示了它们如何影响元素在页面上的布局和位置。
HTML+CSS基础知识(5)相对定位、绝对定位、固定定位
|
6月前
浮动和定位
浮动和定位
|
6月前
|
容器
浮动出现双边距的问题,如何解决?
浮动出现双边距的问题,如何解决?
41 2
定位绝对定位相对定位固定定位
定位绝对定位相对定位固定定位
68 0
定位绝对定位相对定位固定定位