站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

css3清除浮动的几种方式是什么

时间:2022-04-26 [网络编程]作者:fabuyuan 浏览:7 次

方式:1、在一个空的div标签中设置“clear:both”样式来清除浮动;2、给父级元素添加了一个“:after”伪元素,通过清除伪元素的浮动来清除浮动;3、给父元素设置overflow样式,属性值不为visible都可以清除浮动。

本教程操作环境:windows10系统、CSS3&;&HTML5版本、Dell G3电脑。

css3清除浮动的几种方式是什么

浮动(float)可以控制浮动框左右移动,直到遇到另一个浮动框或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流,当元素浮动之后,不会影响块级元素的布局,只会影响内联元素布局。

此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候,此时就会出现“高度塌陷”:

上图中父元素撑开的高度是padding带来的效果,父元素没有设置高度。

在父元素没有设置高度的情况下:

如果父元素里的子元素没有设置浮动,那么父元素的高也会自动被撑开的,出现高度值;

如果父元素里的子元素设置了浮动,那么父元素的高就不会自动被撑开的,也就没有高度值。

显然这样设置浮动后出现了一些问题,比如:

父元素的margin受到影响,无法实现上下左右居中,

若没有给父元素设置高度,浮动后父元素的高度没有被撑开,那么父元素就不会在显示屏上显示。

css如何清除浮动?清除浮动的几种方式是什么?

(1)使用clear:both清除浮动

在代码中在放一个空的div标签,然后给这个标签设置clear:both来清除浮动对页面的影响。它的优点是简单,方便兼容性好,但是一般情况下不建议使用该方法,因为会造成结构混乱,不利于后期维护

<div style="clear: both"></div>

(2)利用伪元素:after来清除浮动

给父级元素添加了一个:after伪元素,通过清除伪元素的浮动,达到撑起父元素高度的目的

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

(3)使用CSS的overflow属性

当给父元素设置了overflow样式,不管是overflow:hidden或overflow:auto都可以清除浮动只要它的值不为visible就可以了,它的本质就是建构了一个BFC,这样使得达到撑起父元素高度的效果

.box{border:1px solid #ccc;background:#eff2f4;overflow: auto}

(学习视频分享:css视频教程

以上就是css3清除浮动的几种方式是什么的详细内容,更多请关注站长家园其它相关文章!

本文标签:  css

转载请注明来源:css3清除浮动的几种方式是什么

本文永久链接地址:https://www.adminjie.com/post/11641.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • mysql怎样只导出表结构

      mysql怎样只导出表结构

      方法:1、利用“mysqldump--opt-d数据库名-uroot-p>...”语句导出数据库表的结构;2、利用“mysqldump-u...

    • mysql中where查询语句怎么用

      mysql中where查询语句怎么用

      在mysql中,where语句常与SELECT语句配合使用,用于指定查询的条件,语法为“SELECT*FROM数据表名WHERE查询条件;”;wher...

    • 520教你用excel表白,让她(他)秒懂你的心!

      520教你用excel表白,让她(他)秒懂你的心!

      520快来了,想好怎么向另一边倾诉爱意了吗?如果没有想好,不妨用excel表白,让她(他)秒懂你的心,快来一起学习学习!先给小伙伴展示一下最终的成果(动图):手...

    • 深入浅析Excel循环引用

      深入浅析Excel循环引用

      本篇文章给大家带来了关于excel的相关知识,其中主要介绍了关于循环引用的相关问题,循环引用是工作表函数中的一个术语,指的是直接或间接地引用了公式所在单元格的值...

    • 实用Word技巧分享:轻松输入省略号的几种方法

      实用Word技巧分享:轻松输入省略号的几种方法

      在之前的文章《实用Word技巧分享:巧用“查找替换”+“通配符”来提取数据》中,我们学习了利用“查找替换”+“通配符”提取数据的方法。今天继续实用Word技巧分...

    热门文章