• 欢迎加入本站交流QQ群:223991312
  •    2年前 (2015-03-17)  前端开发 |   抢沙发  210 
    文章评分 1 次,平均分 5.0

    1、使用空标签清除浮动。我用了很久的一种方法,空标签可以是div标签,也可以是P标签。我习惯用<P>,够简短,也有很多人用<hr>,只是需要另外 为其清除边框,但理论上可以是任何标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动,并为其定义CSS代 码:clear:both。此方法的弊端在于增加了无意义的结构元素。

    对于使用额外标签清除浮动(闭合浮动元素),是W3C推荐的 做法。至于使用<br />元素还是空<div></div>可以根据自己的喜好来选(当然你也可以使用其它块级元素)。不过要注意的 是,<br />本身是有表现的,它会多出一个换行出来,所以要设定它的heigh为0,以隐藏它的表现。所以大多数情况下使用空<div>比较合 适。

    &lt;style type=”text/css”&gt;
    &lt;!–
    *{margin:0;padding:0;}
    body{font:36px bold; color:#F00; text-align:center;}
    #layout{background:#FF9;}
    #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
    #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
    .clr{clear:both;}
    –&gt;
    &lt;/style&gt;
    &lt;div id=”layout”&gt;
    &lt;div id=”left”&gt;Left&lt;/div&gt;
    &lt;div id=”right”&gt;Right&lt;/div&gt;
    &lt;p class=”clr”&gt; &lt;/p&gt;
    &lt;/div&gt;

    2、使用overflow属性。此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性:overflow:auto,即可!”zoom:1″用于兼容IE6,也可以用width:100%。

    不过使用overflow的时候,可能会对页面表现带来影响,而且这种影响是不确定的,你最好是能在多个浏览器上测试你的页面;

    &lt;style type=”text/css”&gt;
    &lt;!–
    *{margin:0;padding:0;}
    body{font:36px bold; color:#F00; text-align:center;}
    #layout{background:#FF9;overflow:auto;zoom:1; }/* overflow:auto可以换成overflow:hidden,zoom:1可以换成width:100%*/
    #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
    #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
    –&gt;
    &lt;/style&gt;
    &lt;div id=”layout”&gt;
    &lt;div id=”left”&gt;Left&lt;/div&gt;
    &lt;div id=”right”&gt;Right&lt;/div&gt;
    &lt;/div&gt;

    3、通过after伪类:after和IEhack来实现,完全兼容当前主流浏览器,具体写法可参照以下示例。

    &lt;style type="text/css"&gt;
    .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
    .clearfix {display: inline-block;}  /* for IE/Mac */
    
    &lt;/style&gt;&lt;!-- main stylesheet ends, CC with new stylesheet below... --&gt;
    
    &lt;!--[if IE]&gt;
    &lt;style type="text/css"&gt;
    .clearfix {
    zoom: 1;     /* triggers hasLayout */
    display: block;     /* resets display for IE/Win */
    }  /* Only IE can see inside the conditional comment
    and read this CSS rule. Don't ever use a normal HTML
    comment inside the CC or it will close prematurely. */
    &lt;/style&gt;
    &lt;![endif]--&gt;

    以下是优化版的清除浮动的样式,很值得推荐。

    .clearfix:after {
        content: "020";
        display: block;
        height: 0;
        clear: both;
    }
    .clearfix {
        zoom: 1;
    }

    另外,分享一个无敌的清除浮动的样式,这个是通过独立的代码来清除的。

    html body div.clear,
    html body span.clear
    {
         background: none;
         border: 0;
         clear: both;
         display: block;
         float: none;
         font-size: 0;
         margin: 0;
         padding: 0;
         overflow: hidden;
         visibility: hidden;
         width: 0;
         height: 0;
    }

    这个样式可以通过在页面中添加<div class=”clear”></div> 或 <span class=”clear”> </span>来清除页面中的浮动。

     

    除特别注明外,本站所有文章均为前端迷原创,转载请注明出处来自http://www.yxxme.com/922.html

    关于
    本站汇集前端开发教程与技巧、交互设计、插件、网页特效、PSD素材、模板源码、网页设计等素材,相关内容均保证绿色安全、优质实用,欢迎大家多多交流,期待共同学习进步。
    切换注册

    登录

    忘记密码 ?

    您也可以使用第三方帐号快捷登录

    切换登录

    注册

    扫一扫二维码分享