首页 >web前端 >css教程 > 正文

css如何利用:after清除浮动

原创2021-04-29 16:36:040744

方法:首先使用“父元素:after{content:'';display:block;}”语句在父元素底部插入并显示一个空的元素块;然后给该元素块添加“clear:both;”样式即可清除所有浮动。

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

什么时候需要清除浮动?清除浮动有哪些方法?

1、对元素进行了浮动(float)后,该元素就会脱离文档流,浮动在文档之上。在CSS中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。

float主要流行与页面布局,然后在使用后没有清除浮动,就会后患无穷。

先看实例:

<div class="outer">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
.outer{ border:1px solid #ccc; background:#fc9; color:#fff; margin:50px auto; padding:50px;}
.div1{ width:80px; height:80px; background:#f00; float:left; }
.div2{ width:80px; height:80px; background:blue; float:left; }
.div3{ width:80px; height:80px; background:sienna; float:left; }


如上图所示,是让1、2、3这三个元素产生浮动所造成的现象。

下面看一下,如果这三个元素不产生浮动,会是什么样子?

.outer{ border:1px solid #ccc; background:#fc9; color:#fff; margin:50px auto; padding:50px;}
.div1{ width:80px; height:80px; background:#f00; /*float:left;*/ }
.div2{ width:80px; height:80px; background:blue;/* float:left; */}
.div3{ width:80px; height:80px; background:sienna;/* float:left;*/ }

如上图所示,当内层的1/2/3元素不浮动,则外层元素的高是会被自动撑开的。

所以当内层元素浮动的时候,就出现以下影响:

背景不能显示;边框不能撑开;margin设置值不能正确显示。

2、清除浮动-----:after方法。(注意:作用于浮动元素的父亲)

原理:利用:after和:before来在元素内部插入两个元素块,从而达到清除浮动的效果。其实现原理类似于<div style="clear:both;
"></div>
方法,只是区别在于:clear在html中插入一个div.clear标签,而outer利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。

.outer { zoom:1; } /*为了兼容性,因为ie6/7不能使用伪类,所以加上此行代码。*/
.outer:after { content:'';clear:both;display:block;width:0;height:0;visibility:hidden; }


其中clear:both;指清除所有浮动;content:' . ';display:block; 对于FF/Chrome/opera/IE8不能缺少,其中content()取值也可以为空。visibility:hidden;的作用是允许浏览器渲染它,但是不显示出来,这样才能实现清除浮动。

利用伪元素,就可以不再HTML中加入标签。

:after 的意思是再.outer内部的最后加入为元素:after,

首先要显示伪元素,所以display:block,

然后为伪元素加入空内容,以便伪元素中不会有内容显示在页面中,所以, content:"";

其次,为使伪元素不影响页面布局,将伪元素高度设置为0,所以width:0, height:0,(可省略)

最后,要清除浮动,所以,clear:both。

tips:

content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容。

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

以上就是css如何利用:after清除浮动的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

  • 相关标签:css :after 清除浮动
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    作者信息

    青灯夜游

    今天学习一小步,明天提升一大步

    最近文章
    php如何将字符串转换为数组547
    php怎么替换字符串中第一个字符253
    css权重是什么747
    推荐视频教程
  • 野秀堂HTML5+CSS3视频教程野秀堂HTML5+CSS3视频教程
  • CSS高级实例视频教程CSS高级实例视频教程
  • CSS3进阶视频教程CSS3进阶视频教程
  • CSS3精讲视频教程CSS3精讲视频教程
  • 视频教程分类