如何清除浮动?

有兴趣的可以亲自试试效果,能够加深印象。

父级div定义 伪类:after和zoom

  <style>
            .div1 {
                background: #000080;
                border: 1px solid red;
            }
            .div2 {
                background: #800080;
                border: 1px solid green;
                height: 100px;
                margin-top: 10px;
            }
            .left {
                float: left;
                width: 20%;
                height: 200px;
                background: #DDD;
            }
            .right {
                float: right;
                width: 30%;
                height: 80px;
                background: #DDD;
            }
            /*清除浮动代码*/
            .clearfloat:after {
                display: block;
                clear: both;
                content: "";
                visibility: hidden;
                height: 0;
            }
            .claerfloat { zoom:1; }
  </style>

  <div class="div1 clearfloat">
    <div class="left">Left</div>
    <div class="right">Right</div>
  </div>
  <div class="div2">Div2</div>
</body>
原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决IE6、IE7浮动问题;
优点:浏览器支持好、不容易出现怪问题(目前:大型网站都有使用,如:腾讯、网易、新浪等) ;
缺点:代码多、不少初学者不理解原理,要两句代码结合使用才能让主流浏览器都支持;
建议:推荐使用,建议定义公共类,以减少CSS代码。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • 为什么清除CSS浮动这么难?因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及 widt...
    痛心凉阅读 1,638评论 0 2
  • 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或righ...
    Maggie_77阅读 5,492评论 1 3
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 4,990评论 0 1
  • 这篇文章极好,以至于让我受益良多,就一字没有改动的转发过来一丝冰凉老师的文章 需要注意的是,display:tab...
    新晋小牛牛阅读 4,676评论 0 2