zoukankan      html  css  js  c++  java
  • 高度塌陷 mn

    什么是高度塌陷?

    在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。但是当子元素设置浮动之后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷。

    原代码: 

    <div id="yeluosen">
    <div id="a1"></div>
    <div id="a2"></div>
    </div>
     

    1.加一个空div标签清除浮动(缺点:不利于优化,优点:兼容性强)

    <div style="clear:both"></div>
    2. overflow+zoom(优点:兼容性强。 缺点:对margin属性有影响,不能设负值,设负值无效。负值绝对定位也不可以。)

    #yeluosen{
    overflow:hidden;
    zoom:1;
    }
    3.after+zoom (最好用的,最推荐的,兼容性也很好)

    #yeluosen{                    //兼容IE
    zoom:1
    }
    #yeluosen:after{           //在父元素后添加空内容并清除浮动影响
    display:block;              
    content:'',
    clear:both;                    //清除浮动影响
    height:0;
    overflow:hidden           //溢出隐藏
    }
    4.让父元素本身也浮动(不推荐,如果也设置浮动,父元素宽度就会随着子元素变化)

    #yeluosen{
    float:left;
    }

  • 相关阅读:
    junit单元测试
    方法引用
    方法引用表达式(1)
    Stream流的常用方法
    Stream流
    综合案例:文件上传
    tcp通信协议
    python 生成器与迭代器
    Python 序列化与反序列化
    python 文件操作
  • 原文地址:https://www.cnblogs.com/mn007/p/13377996.html
Copyright © 2011-2022 走看看