百度360必应搜狗淘宝本站头条
HTML5 标签标签HTML5 标签 (已废弃)HTML 简介键盘快捷键
当前位置：网站首页 > 技术文章 > 正文

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

zhezhongyun 2025-05-25 16:47 3 浏览

前言

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

元素浮动情况

上图的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来清除元素浮动的方法，你掌握了吗？

相关推荐

带你看好玩的CSS-霓虹灯按钮

对于前端开发人员来说，css是我们再熟悉不过的朋友的，它就相当于是我们页面的衣服，页面好不好看，就看我们css运用的是否炉火纯青。css学起来简单，但是我们要把它“修炼”到出神入化境界，那这可不是一丁...

自动生成的静态代码示例

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/...

如何用代码快速制作营销网站底部广告?

当前在很多的旅游网站，底部固定广告已经成为一种常见的形式，可以参看下图。以途牛为例，下边我们一起来说一下整个制作流程显然底部是固定定位的盒子，并且是分为两组，一组为显示状态下，一组为隐藏状态下，并且通...

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

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

css reset 标签属性默认值

在现在的网站设计中使用reset.css用重置整个站点的标签的CSS属性的做法很常见，但有时候我们已经为了reset而reset，我们经常看到这样的reset代码其实大部分CSSreset是没必要...

CSS实现溢出显示省略号

小伙伴们，对于省略号呢，咱们前端攻城狮的实现方法可就是多种多样了，那接下来呢我就给你罗列一下如果用css书写这些特殊效果，来一起看看吧~~~1.单行文本超出显示省略号效果图：实现代码:HTML部分&l...

CSS 基础大揭秘:打造酷炫网页的魔法钥匙

在当今这个数字化时代，网页已经成为我们生活中不可或缺的一部分。无论是购物、学习还是娱乐，我们每天都会与各种各样的网页打交道。而你是否曾好奇，那些设计精美的网页是如何实现的呢？今天，我们就来揭开网页设计...

治愈焦虑!清晨两道 CSS 面试题，轻松开启元气学习日

晨光透过窗户洒在键盘上，又是充满希望的一天。前端的小伙伴们，在忙碌的工作和面试压力下，不妨趁着清晨和上午这段宁静时光，静下心来，和我一起解锁CSS的奇妙世界。今天咱们就用两道高频面试题，开启元气满...

浅谈position中absolute和relative

CSSposition属性中absolute和relative很容易让人弄混，基本的概念什么着，你去参考W3C，就不啰嗦了--------------------------------------...

Highcharts基础教程(二):图表配置

一、图表容器Highcharts实例化中绑定容器的方式有两种：1.通过dom调用highcharts函数的方式$("#container").highcharts({//...

CSS之垂直导航条

今天的内容比较简单，我们来学习一种常见的垂直导航条的实现方法，首先看一下效果图：1.首先我们创建一个有效的列表<li><ahref="http://www.？？？.com">...

Inkscape 1.4 新功能介绍

各位Inkscape爱好者们，备受期待的Inkscape1.4版本已经正式发布，现在就可以从Inkscape官网下载体验了！这次更新带来了许多强大的新功能和改进，旨在提升你的矢量图形编辑...

前端内功修炼:5大主流布局系统进阶

获课：keyouit.xyz/14642/前端布局进阶：从盒模型到弹性布局，深入解析5大主流布局系统核心原理前端布局是构建用户界面的基石，理解不同布局系统的底层逻辑和适用场景对于开发高效、可维护的...

MVP最小可用产品实践:用Pywebio库写一个接口加解密的小工具

背景最近在接口测试的过程中，由于请求报文需要先进行加密再发起请求，响应报文也需要先解密才能提取指定字段的返回值传递给下一个接口，每次都要通过代码运行相应的加/解密方法进行解析，操作起来特别麻烦，所以我...

网易的互动版涂小瓶子爆火，究竟是如何做到的?

https://mp.weixin.qq.com/s/5vmXPBWcJZ_oZ4p1znNNLw附上爆火图文链接，复制打开即可查看其实最开始看见的时候没想到这个小小的瓶子会这么火，现在的SVG交互图...

一周热门
最近发表
标签列表