zoukankan      html  css  js  c++  java
  • 清除浮动的几种方式及优缺点总结

    一、额外标签法(在最后一个浮动元素的后面新加一个标签如<div class="clear"></div>,并在其CSS样式中设置clear: both;)

    优点:简单,通俗易懂,写少量代码,兼容性好
    缺点:额外增加无语义html元素,代码语义化差,后期维护成本大

    二、给父级设置高度

    优点:简单,写少量代码,容易掌握
    缺点:不够灵活,只适用于高度固定的布局

    三、触发父BFC(如给父元素设置overflow:hidden,特别注意的是:在IE6中还需要触发hasLayout,例如给父元素设置zoom:1。原理是触发父级BFC后,父元素在计算高度时,浮动的子元素也会参与计算)

    优点:简单,代码简洁
    缺点:设置overflow:hidden容易造成不会自动换行导致超出的尺寸被隐藏掉,无法显示要溢出的元素

    四、使用after伪元素常见的方法如下

    .clearfix::after {
        content: ".";
        display: block;
        height: 0;
        line-height: 0;
        clear: both;
        visibility:hidden;
        font-size: 0;
     }
     
     .clearfix {
        // 注意此处是为了兼容IE6和IE7浏览器,即触发hasLayout
        zoom: 1;
     }

    优点:符合闭合浮动思想,结构语义化正确
    缺点:代码量多,因为IE6-7下不支持after伪元素,需要额外写zoom:1来触发hasLayout

  • 相关阅读:
    static用法
    Spring相关配置及工厂模式
    Mybatis的相关配置及理解
    jsp内置对象简介
    JAVA基础——接口的理解
    JAVA基础——抽象类以及final修饰符总结
    关于JAVA基础 ——继承的总结
    封装
    static的用法
    构造方法的重载
  • 原文地址:https://www.cnblogs.com/chen-cheng/p/11950060.html
Copyright © 2011-2022 走看看