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

  • 相关阅读:
    C#连接各种数据库的方法
    C#中MDI窗体的一些设置
    Winform子窗体刷新父窗体
    MDI窗体应用程序
    C# 窗体间传值方法大汇总
    mdi父窗体如何向子窗体发送数据
    DataGridView 清空原数据
    js call回调的this指向问题
    sass进阶 @if @else if @else @for循环
    sass的加减乘除
  • 原文地址:https://www.cnblogs.com/mn007/p/13377996.html
Copyright © 2011-2022 走看看