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;
    }

  • 相关阅读:
    Web网页配色方案及安全色谱
    JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
    IE8的css hack
    jquery 获取元素坐标
    CSS 颜色值
    正则表达式
    JS获取宽度
    常用正则表达式例子
    HTML转义字符
    myeclipse 10.0 含破解补丁/注册机
  • 原文地址:https://www.cnblogs.com/mn007/p/13377996.html
Copyright © 2011-2022 走看看