美文网首页
高度塌陷

高度塌陷

作者: 回忆在美也是曾经 | 来源:发表于2018-11-29 19:20 被阅读0次
    • 本来父元素是由子元素抻开的,子元素设置了浮动之后,子元素就脱离文档流了,父元素无法抻开,就会形成高度塌陷

    解决高度塌陷

    • BFC
    • 父元素的垂直外边距不会和子元素重叠
    • 开启BFC的元素不会被浮动元素所覆盖
    • 开启BFC的元素可以包含浮动的子元素

    如何开启BFC

    • 设置元素浮动
    • 设置元素的绝对定位
    • 设置元素为inline-block
    • 将元素的overflow设置为一个非visible的值(副作用最小的)

    .box{
        border:10px red solid;
        overflow:hidden;
    }
    

    兼容IE6浏览器

    hasLayout  zom:1;
    

    相关文章

      网友评论

          本文标题:高度塌陷

          本文链接:https://www.haomeiwen.com/subject/pyozqqtx.html