触发bfc解决父子元素嵌套垂直方向margin塌陷问题

Posted 2021-01-10 kungfupan

首先看一下问题案例

.wrapper{

            width: 100px;

            height: 100px;

            background-color: aqua;

            margin-top: 100px;

            margin-left: 100px;

        }

        .inner{

            width: 50px;

            height: 50px;

            margin-top: 100px;

            margin-left: 50px;

            background-color:black;

        }

 

<div class="wrapper">

        <div class="inner"></div>

    </div>

可以明显看到的是子元素inner设置了margin-top:100px，照理来讲其应该相对父元素往下偏移100px，

但是实际效果确是子元素上边界却紧紧的贴着父元素的上边界，所以这时inner的margin-top并没有生效，

而且也没有对布局带来其他影响，接下来再看一个有趣的现象

首先修改inner的样式将margin-top设为200px

        .inner{

            width: 50px;

            height: 50px;

            margin-top: 200px;

            margin-left: 50px;

            background-color:black;

        }

 然后再看效果

 对比发现这回子元素inner上边界仍然紧贴着父元素上边界，但是连带着父元素，这两个div距离窗口上方的距离都增加，

这就是两个元素元素嵌套时，子元素垂直方向的margin塌陷问题，其实这样的布局条件下，这两个元素的margin-top被混合在一起计算了，

其结果是浏览器取了两个元素中margin-top的最大值作为这两个元素最终的margin-top

 

那么怎么解决这个问题呢？这就要用到bfc的概念

bfc指的是block format context，块级格式上下文，触发bfc的元素将会改变一小部分的渲染规则，可用于解决一些css的疑难bug

那么如何才能触发bfc呢？

一般来讲，如果一个元素具有以下其中一个样式，则这个元素变成了bfc元素，其渲染规则将会发生一些变化，这些样式有：

position:absolute;

display:inline-block;

float:left/right;

overflow:hidden;

而结合本案例我们使用overflow属性即可，给父元素wrapper加上overflow:hidden，子元素inner的margin-top还是设为50px，样式最终如下

.wrapper{

            width: 100px;

            height: 100px;

            background-color: aqua;

            margin-top: 100px;

            margin-left: 100px;

            overflow: hidden;

        }

        .inner{

            width: 50px;

            height: 50px;

            margin-top: 50px;

            margin-left: 50px;

            background-color:black;

        }

 这时我们发现，网页的显示终于达到了预期的效果