清除浮动clearfix-阿里云开发者社区

开发者社区> 小麻雀> 正文

清除浮动clearfix

简介:
+关注继续查看

一直有在用,但是没有分析几种清楚浮动的方法和他们之间的比较。


为什么要清除浮动?

盒子里用了CSS float属性,父级对象不能被撑开。

claerfix-before

这是6个float:left<li>,父级<ul>添加上了边框,明显没有撑开。


这样的副作用是什么?

  1. 背景效果出不来

  2. 边框出不来

  3. margin\paddding不正确


清除浮动的四种方法比较

  1. 使用高度

    说明:在父元素上加个高度

    缺点:内容的高度必须确定而且计算好,如果以后要改变或者做自适应,就很麻烦。

    推荐指数:

  2. clear:both;

    说明:先说说clear:both;:左右均不允许浮动元素。如果是clear:left;:左侧不允许浮动元素。clear:right;就不用说啦。然后,定义一个类是clear:both;属性,在浮动元素的最后添加一个空的标签,用上这个类,它就把整个父元素撑开了。

    缺点:需要在html里面多加标签

    推荐指数:

  3. 父级定义overflow:hidden;

    说明:overflow:hidden;:。必须定义zoom:1;,zoom是IE的专用属性,本身作用是用来设置和检索对象的缩放比例,但基本用不动。可以用来清除浮动、解决margin导致的重叠问题。

    缺点:和position一起用的时候,有可能出现超出部分隐藏。而且,感觉zoom不是很规范。

    m20140815145811

    m20140815145700

    推荐指数:

  4. 父级div定义伪类:after和zoom

    说明:

    这要开始详细的说了。我之前都是用overflow:hidden;,现在也开始用这种方法了。

    代码:

    .clearfix {
        *zoom:1;
    }
    .clearfix:after {
        display: block;
        clear: both;
        height: 0;
        font-size: 0;
        content: ' ';
    }
    

    :after选择器在Quirks模式在不支持的。

    因此需要zoom:1。

    一般这种方法可以放在定义公共类的CSS文件中。

    (博客主题没有加<code><pre>的CSS样式,先将就看看。)

    推荐指数:

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用NAT网关轻松为单台云服务器设置多个公网IP
在应用中,有时会遇到用户询问如何使单台云服务器具备多个公网IP的问题。 具体如何操作呢,有了NAT网关这个也不是难题。
26779 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
2958 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10882 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
12070 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
11815 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
7457 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
4496 0
+关注
34
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载