bfc和两个经典bug

一、触发bfc(block format context块级格式化上下文)

css把html的每一个元素都当成一个盒子，并且认为每个盒子都有一套渲染规则，每一个盒子里都有一套一模一样的语法规则，触发bfc就是通过一些特定的手段，让其中的几个或者一个盒子里面的渲染规则发生改变，改变的程度只有一点点，可以解决两个经典Bug。

二、如何触发一个盒子的bfc

position:absolute;绝对定位
display:inline-block;行间块级元素
float:left/right;浮动
overflow:hiden;溢出盒子的部分要隐藏展示

三、margin塌陷bug

HTML

<div class="wrapper">
    <div class="content"></div>
</div>

CSS

1.小于等于父元素设定的margin值时

.wrapper{
    margin-left: 100px;
    margin-top: 100px;
    width: 100px;
    height: 100px;
    background-color: black;
}
.content{
    margin-top: 100px;
    width: 50px;
    height: 50px;
    background-color: green;
}

小于等于父元素设定的margin值.jpg

2.大于父元素设定的margin值时

.content{
    margin-left: 50px;
    margin-top: 150px;
    width: 50px;
    height: 50px;
    background-color: green;
}

大于父元素设定的margin值.jpg

不但子元素执行margin-top，还要连带着父元素一起执行
这个现象是因为垂直方向的margin父子元素是结合到一起的
二者共同取最大的值，就好像父级的顶边不存在了
这个效果叫做margin塌陷

四、解决margin塌陷的办法 触发bfc

.wrapper{
    margin-left: 100px;
    margin-top: 150px;
    width: 100px;
    height: 100px;
    background-color: black;
    position:absolute;
}

针对性的 没影响的 选择触发父级的bfc方式 改变父级渲染规则以解决问题

.content{
    margin-left: 50px;
    margin-top: 100px;
    width: 50px;
    height: 50px;
    background-color: green;
}

五、margin合并bug

HTML

<span class="box1">123</span>
    <span class="box2">234</span>

CSS

.box1{
    background-color: red;
    margin-right: 100px;
}
.box2{
    background-color: green;
    margin-right: 100px;
}

两个盒子之间的距离累加不共用 区域不共用

HTML

<div class="demo1">1</div>
<div class="demo2">2</div>

CSS

.demo1{
    background-color: red;
    margin-bottom: 100px;
}
.demo2{
    background-color: green;
    marker-top: 200px;
}

两个兄弟结构垂直方向的margin合并100px+200px=200px

如果垂直方向的margin两个值均为正值：合并取大
eg：100px + 200px = 200px
两个值均为负值：合并取小
eg：(-20px) + (-30px) = -30px
两个值为一正一负：正负抵消
eg：(-20) + (30px) = 10px

margin合并.jpg

五、解决margin合并的办法 触发bfc

1.父级触发bfc
HTML

<div class="demo1">1</div>  
<div class="warpper">   
     <div class="demo2">2</div>
</div>

CSS

.warpper{
        display:inline-block;
}
.demo1{
    background-color: red;
    margin-bottom: 100px;
}
.demo2{
    background-color: green;
    marker-top: 200px;
}

2.或者把两个div都放在bfc环境里
HTML

<div class="wrapper">
    <div class="demo1">1</div>
    <div class="demo2">2</div>
</div>

最好不要以改动html的方式来修改bug
真实开发中选择不解决这个问题直接调节margin值即可
想要多少就把margin调成多少