理解BFC

内容是根据B站上果冻公开课的老师讲的整理的，目的是为了让自己巩固加深一下。

1.什么是BFC，为什么会有BFC

2.BFC解决了哪些问题

3.BFC解决的问题还有其他的解决办法吗？

1. 什么是BFC：

BFC：block formatting context:块级格式上下文。

MDN解释：是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

大白话解释：形成BFC的区域会形成一个完全独立的空间，让空间的子元素不会影响其到外面元素的布局，同时外边元素的布局也不会影响到内部元素的布局。

2。触发BFC的条件都有哪些？

给父元素设置一些css属性

1）float 不为 none

2）position：不为relative和static

3）overflow：为auto，hidden或者scroll

4）display：table-cell或者inline-block

3. BFC怎么用，解决了哪些存在的问题

1）解决了浮动元素让父元素的高度塌陷的问题

假设页面中有一个父元素和n个子元素

 <div id = "parent">    
<div class = "child">child</div>    
<div class = "child">child</div>    
<div class = "child">child</div>    
<div class = "child">child</div>  
</div>

 #parent{      
background-color: aqua;    
}    
.child{      
background-color:chartreuse;      
width: 200px;      
height: 100px;
border:1px solid black    
}

不设置浮动的时候，页面的布局显示的是,没有给父元素设置高度，父元素的高度完全由子元素撑开

此时如果给子元素增加一个浮动的属性

 #parent{      
    background-color: aqua;          
    }    
.child{      
    float:left;      
    background-color:chartreuse;      
    width: 200px;      
    height: 100px;      
    border:1px solid black;   
 }

我们发现 父元素的高度没了。这种现象就是由于浮动导致的父元素高度塌陷。这是因为浮动的元素脱离了文档流，形成了一个新的VIP队列，这样父元素就没办法触碰到这些子元素，从而导致子元素无法去撑开父元素的高度，因为父元素找不到子元素了。

这时候为了解决这个问题，我们可以给父元素设置一些css属性让他触发BFC，从而形成一个独立的空间。

 #parent{      
    background-color: aqua;      
    overflow: hidden;//可以用上面说的任意一个条件来触发BFC    
    }    
.child{      
    float:left;      
    background-color:chartreuse;      
    width: 200px;      
    height: 100px;      
    border:1px solid black;    
}

同样的结局父元素高度塌陷还可以有其他办法

(1).比如说直接给父元素添加一个大于等于子元素的高度,只适用于已知子元素的高度

 #parent{      
    background-color: aqua;      
    height:200px;    
    }    
.child{      
    float:left;      
    background-color:chartreuse;      
    width: 200px;      
    height: 100px;     
    border:1px solid black;    
}

(2).在浮动的元素后面添加一个新的空元素，设置clear:both用来清除浮动

缺点是会增加无意义的标签

 #parent{      
    background-color: aqua;          
    }   
.child{      
    float:left;     
    background-color:chartreuse;      
    width: 200px;      
    height: 100px;      
    border:1px solid black;    
}    
.clear{      clear: both;    }

<div id = "parent">    
<div class = "child">child</div>    
<div class = "child">child</div>    
<div class = "child">child</div>    
<div class = "child">child</div>    
<div class="clear"></div>  
</div>

(3)给父元素添加一个伪类

  #parent{      
background-color: aqua;          
}    
.child{      
    float:left;      
    background-color:chartreuse;      
    width: 200px;      
    height: 100px;      
    border:1px solid black;    
    }    
#parent::after{                  
    clear: both;      
    content: '';      
    display: block;              
 }

2）。利用BFC还可以解决的事情是：

实现自适应的布局方式

比如左边定宽右边自适应。

    .container{      
        overflow: hidden;      
        width: 800px;          
    }    
    .left{       
        float: left;      
        width: 200px;      
        background-color:yellow;      
        height: 300px;      
        margin-right: -100%;    
    }    
    .right{      
        float: left;     
        background-color:blue;      
        width: 100%;      
        height: 300px;      
        margin-left: 200px;          
    }   

 <div class="container">    
<div class="left"></div>   
 <div class="right"></div>  
</div>

右边定宽左边自适应

  .container{      
       overflow: hidden;     
       width: 800px;      
       padding-right: 200px;    
    }    
  .left{      
    float: left;      
    width: 100%;      
    background-color:yellow;     
    height: 300px;    
    }    
.right{      
    float: left;      
    background-color:blue;      
    width: 200px;      
    height: 300px;      
    margin-left: -200px;    
}

3).解决外边距垂直方向重合

兄弟元素的外边距，在垂直方向上会取最大值，而不是取和。

相邻的两个元素在垂直方向上的外边距都设置了外边距是20，本来希望在垂直方向上会有40像素的边距，但是最后却只有20像素，这就是垂直方向外边距重合问题

  .top{     width: 200px;     margin-bottom: 20px;     background-color: chartreuse;     height: 200px;   }   .bottom{     width: 200px;     margin-top: 20px;     background-color: chartreuse;     height: 200px;   }

<div class="top">上面的盒子</div>  <div class="bottom">下面的盒子</div>

解决方法是在其中的一个盒子上添加一个父元素，让他触发BFC

<div class="top">上面的盒子</div>  
<div class="wrap">    
<div class="bottom">下面的盒子</div> 
 </div>

.top{     
    width: 200px;     
    margin-bottom: 20px;     
    background-color: chartreuse;     
    height: 200px;   
}   
.bottom{     
    width: 200px;     
    margin-top: 20px;     
    background-color: chartreuse;    
     height: 200px;   
}   
.wrap{     overflow: hidden;   }