zoukankan      html  css  js  c++  java
  • CSS之浮动那些事

    1.清除浮动

    下面是两种常用的方式,而这两招也够用了(不用千招会,只需一招精)。

    1.结尾处加空div标签 clear:both

    <style type="text/css"> 
    
    .left{float:left;}
    .right{float:right;}
     
    /*清除浮动代码*/
    .clearfloat{clear:both}
    </style> 
     
    <div> 
        <div class="left">Left</div> 
        <div class="right">Right</div>
        <div class="clearfloat"></div>
    </div>

    缺点:每次清除浮动都加空div,影响了HTML的结构,例如如果要算div的个数,都会被影响到。

    2.父级div定义 伪类:after

    <style type="text/css"> 
    
    .left{float:left;}
    .right{float:right;}
     
    .clearfloat:after{
        content:"200B";/*unicode字符里零宽度空格*/
        display:block;
        height:0;
        clear:both;
    }
    </style> 
     
    <div class="clearfloat"> 
        <div class="left">Left</div> 
        <div class="right">Right</div>
    </div>

    我更倾向使用这种清除浮动的方式,不增加HTML,浏览器兼容性也好,写法在我看来也简洁。

    PS:不过如果要兼容IE6、IE7,就需要加多个zoom:1。

  • 相关阅读:
    strstr 函数的实现
    函数模板与模板函数
    内核态和用户态
    最短路径算法(跟新SPFA,Ford)
    P1042 乒乓球
    P2347 砝码称重
    P1087 FBI树
    P1540 机器翻译
    P1028 数的计算
    P1067 多项式输出
  • 原文地址:https://www.cnblogs.com/lovesong/p/3762296.html
Copyright © 2011-2022 走看看