likes
comments
collection
share

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

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

什么是父元素塌陷

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷，即可能变成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;
    }

总结

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

转载自:https://juejin.cn/post/7174946446150467644
评论
请登录