百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

CSS中清除浮动的几种方法,快来学习一下吧

yuyutoo 2025-04-06 00:10 5 浏览 0 评论

前言

首先我们通过一张图来解释下元素浮动是什么样的状态。

元素浮动情况

上图的html部分代码为:

html代码

css部分代码为:

css代码

通过上面的图片可以看出,当内部的div设置float后,外部的元素的就会受到以下影响:

  • 背景不能显示

  • 边框不能被撑开

  • margin和padding设置的值不能正确显示

元素浮动的坏处

如果不清除元素浮动的话,浮动层后面的非浮动层内容就有可能被覆盖,造成页面的排版混乱。

例如在上面的例子中再加一个非浮动的div,就会发现该div被前面的三个浮动div覆盖住。

因为浮动,后面的div被覆盖

既然会出现这种情况,我们就应该设法清除掉元素的浮动。

方法1-父级元素设定定高

我们可以给父级元素.outer设置为定高,这样就可以不影响后面的非浮动元素。.outer的样式为:

设置定高

达到的效果为

清楚浮动之后

虽然这种方法可以清楚浮动,但是对父元素设置定高会有很多的限制,如果内层div的高度变化,则需要手动修改外层div的高度,相对来说有点麻烦,因此这种方法并不推荐。

方法2-添加新元素,设置clear:both

在父元素内部的末尾处添加一个新的div,并设置其clear: both;属性。

添加一个新的div

该新增div的css属性为:

新增div的css属性

利用该方法同样可以达到清楚浮动的效果,但是由于会新增DOM元素,这种方法也不推荐。

方法3-父级元素使用overflow:hidden属性

在父级元素上使用overflow:hidden属性,准确来说只要不给overflow属性设置为visible都可以清除元素浮动。

设置overflow: hidden

使用这种方法可以少写很多css样式代码,同时不会新增DOM元素,因此推荐使用这种方式。

方法4-对父元素使用伪元素

通过对父元素使用:after伪元素,同样可以达到清除浮动的效果。

伪元素清楚浮动

以上方法在伪元素中,通过设置clear与overflow属性来实现。方法4在实际的项目中使用的频率最高,因此极大的推荐使用方法4来清除元素浮动。

其他方法

看到网上有的资料介绍,通过设置父元素为浮动,或者设置父元素为absolute定位,这两种方法只是能显示父元素而已,但父元素同样会覆盖到后面的非浮动元素,因此这两种方法严格意义来说并不算清除浮动的方法。

总结

今天这篇文章主要介绍了几种通过CSS来清除元素浮动的方法,你掌握了吗?

相关推荐

刚买的阿里云服务器怎么用(阿里云服务器买完如何使用)

刚买的阿里云服务器怎么用?阿里云服务器在购买之后,需要进行一些操作,比如配置安全组,修改密码,安装软件,导入数据库等。具体如下:1.买了云服务器,第一件事就是重置密码。登录云主机控制台,可以在服务器管...

在阿里云 腾讯云上创建MySQL云数据库只需9步

与自建数据库相比,采用云数据库的优势是减少对数据库的运维任务。云数据库支持MySQL、SQLServer、MongoDB等多种数据库类型。下面看看如何设计高可用的云数据库。...

本地搭建简单的Kubernate实验环境并安装数据库

因为dockerhub的限制,这个工作还是有些麻烦的,在这里把过程分享给大家。由于是本地部署并且用于学习和实验,所以使用minikube1.安装docker最新版本的docker方法见链接:...

阿里云服务器安装宝塔面板教程,配置及错误解决方法全攻略

阿里云服务器安装宝塔面板,虽然教程很多,但估计你都看得云里雾里,不太明白,这也是我写这一批文章要解决的问题,将各种问题和配置方法分享,希望能对您有帮助。本文适合想要做网站的站长、技术爱好者,服务器管理...

Aliyun ecs上安装Mysql(yum mysql安装)

安装环境:阿里云ECS+操作系统ubuntu+mysql我这里直接就使用网上安装,输入如下的指令sudoapt-getinstallmysql-server注意:在安装的过程会要输入两次密码,...

阿里云服务器 centos 8 安装MYSQL

1、环境安装yumsearchlibaioyuminstalllibaioyum-yinstallnumactlyuminstalllibnumayuminstallld...

女人要当心 吃越少毛病越多?孕二月的妈咪营养关注?excel2003?

对身体过瘦的人来说,体内脂肪和蛋白质均供应不足,因此头发频繁脱落,发色也逐渐失去光泽。如果过分节食,头发则缺乏充足的营养补给,其中包括缺少铁的摄入,便会枯黄无泽,最后导致大量脱发。体瘦的女性髋骨骨折发...

新一代福克斯RS正式发布搭2.3T动力四驱

新一代福克斯RS正式发布搭2.3T动力四驱来源:经销商供稿日期:2015-02-20全新一代福克斯RS搭载了一台2.3TEcoBoost四缸涡轮增压发动机,并首次配备了拥有多片离合器的四驱系统。日...

两栏布局、左边定宽200px、右边自适应如何实现?

一、两栏布局(左定宽,右自动)1.float+margin即固定宽度元素设置float属性为left,自适应元素设置margin属性,margin-left应>=定宽元素宽度。举例:...

8个前端面试的题目(前端面试题2020及答案 知乎)

一、行内元素有哪些?块级元素有哪些?CSS的盒模型?块级元素:divph1h2h3h4formul行内元素:abbrispaninputselectCss盒模型:内容,bo...

CSS中清除浮动的几种方法,快来学习一下吧

前言首先我们通过一张图来解释下元素浮动是什么样的状态。元素浮动情况上图的html部分代码为:html代码css部分代码为:css代码通过上面的图片可以看出,当内部的div设置float后,外部的元素的...

前端兼容性问题总结(前端常见的兼容性问题)

1.如何在IE6及更早浏览器中定义小高度的容器?IE6及更早浏览器之所以无法直接定义较小高度的容器是因为默认会有行高。解决:#test{overflow:hidden;height:1px;fon...

关于浮动清除的一些小感悟,4种方法清除浮动

如何脱离标准文档流,css中给了三种方法,使一个元素脱离标准文档流。1.浮动。2.绝对定位。3.固定定位。一、什么是浮动呢?定义这样说:浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一...

从abc起步学做网站(4)(从abc开始学英语)

现在我们有了个网站index.htm,并且绑定了域名(没有买域名的同学可以继续用空间商送的免费的,一样学),这一篇我们扩充网站index.htm的内容,并且排版。首先说怎么添加图片,在网上随便找个好看...

如何解决div的高自适应问题(css设置div高度自适应)

一、DIV高度自适应(父div高度随子div的高度改变而改变)1、如果父div不定义height、子div均为标准流的时候,父div的height随内容的变化而变化,实现父div高度随子div的高度改...

取消回复欢迎 发表评论: