likes
comments
collection
share

关于css中父元素塌陷问题以及解决办法

作者站长头像
站长
· 阅读数 6

什么是父元素塌陷

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

如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div class="parent">
        <div class="child">
            我是子元素
        </div>      
    </div>
    
    
    
</body>

<style scoped lang="scss">
    .parent{
       background-color: yellow;
    }
    .child{
        background-color: red;
        width: 200px;
        height: 200px;
        float: left;
    }  


</style>
</html> 
 
    

没有设置浮动效果,可以看到父元素高度是200,是子元素的高度来定的 关于css中父元素塌陷问题以及解决办法

当给子元素设置浮动属性float后,如下,父元素已经没有高度了,因此背景颜色也看不到了。

关于css中父元素塌陷问题以及解决办法

解决方式

给父元素设置一个伪类,加上一些清除属性

   .parent:after{
        content:""; 
        display:block; 
        clear:both; 
    }

这种方式比较方便,也影响最小。

浮动元素同级加上一个clear:left/right属性,浮动是哪边就写哪边。

这种方式相当于加上了一个空的div,不太合适,应该尽量避免这样的写法。

    .child2{
        clear: left;
    }

父元素加上 overflow:hidden;属性

这种相当于触发了BFC机制,只要不是visible都可以。

BFC可以理解为就是一个独立的盒子,里面的子元素不会在布局上影响外面的元素(里面怎么布局都不会影响外部),BFC仍属于文档中的普通流。

display的值是inline-block、table-cell、flex、table-caption或者inline-flex都可创建成BFC

    .parent{
       background-color: yellow;
       overflow: hidden;
    }

父元素加上inline-block触发BFC,或者同样加上一个浮动属性flaot,或者加上绝对定位属性,也可解决高度塌陷问题。

这种方式相当于父元素宽高完全取决于子元素了,会跟子元素一致。

  .parent{
       background-color: yellow;
       /* overflow: hidden; */
       /* display:inline-block; */
       /* position:absolute; */
       float: left;
    }

给父元素加上一个固定高度也可以解决

这种方式相当于有了一个高度限制了,对元素不是更好的发挥了。

   .parent{
       background-color: yellow;
       min-height: 100px;
    }

总结

主要记录下经典的父元素塌陷问题,在开发过程中如果碰到相关问题,可以联想到这几种解决办法,更好的去优化代码。