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

css要如何清除浮动

原创2021-10-12 15:02:1901078

css清除浮动的方法:1、浮动代码后添加一个设置了“clear:both”样式的空div标签。2、给父级元素添加一个设置“clear:both;”样式的after伪元素。3、给父元素设置“overflow: auto”样式。

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

在我们写代码的时候,有时因为使用了float浮动元素而导致页面中某些元素不能正确的显示。

但使用float浮动元素后,会有一些不好的影响:

(1)由于浮动元素脱离了文档流,所以父元素的高度无法被撑开,影响了与父元素同级的元素
(2)与浮动元素同级的非浮动元素会跟随其后,因为浮动元素脱离文档流不占据原来的位置
(3)如果该浮动元素不是第一个浮动元素,则该元素之前的元素也需要浮动,否则容易影响页面的结构显示

这个时候就需要清除浮动了,下面介绍一些css清除浮动的方法。

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

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

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

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

给父级元素添加了一个: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视频教程

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

php中文网最新课程二维码

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

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

    相关视频


    网友评论

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

    我要评论
  • 专题推荐

    作者信息

    青灯夜游

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

    最近文章
    php怎么分割数组为几部分657
    php怎么删除指定下标的数组值824
    php怎么获取当前方法的参数值729
    推荐视频教程
  • 野秀堂HTML5+CSS3视频教程野秀堂HTML5+CSS3视频教程
  • CSS高级实例视频教程CSS高级实例视频教程
  • CSS3进阶视频教程CSS3进阶视频教程
  • CSS3精讲视频教程CSS3精讲视频教程
  • CSS 4.2.4参考手册CSS 4.2.4参考手册
  • 视频教程分类