了解BFC与使用

一：什么是BFC

官方文档介绍：一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素，BFC是一块块独立的渲染区域，可以将BFC看成是元素的一种属性，拥有了这种属性的元素就会使他的子元素与世隔绝，不会影响到外部其他元素

<div class="1">
<div class="2"></div>
<div class="3"></div>
<div class="a1">
<div class="a2></div>
</div>
</div>

1,每一个BFC区域只包括其子元素，不包括其子元素的子元素。(BFC 1不包含a2的元素。a1只包含a2)

2,每一个BFC区域都是独立隔绝的,互不影响

二：怎样使一个元素变成BFC区域

大概有以下几种办法：

·body根元素

·（子）设置浮动，不包括none

·（子）设置定位，absoulte或者fixed

·（子）行内块显示模式，inline-block

·（父）设置overflow，即hidden，auto，scroll

·（父）弹性布局，flex

·表格单元格，table-cell

三：解决问题

1，解决外边距margin的塌陷问题(垂直塌陷)

当两个相邻的盒子都要100px 的margin 时，距离应该有200px，但实际中只有100px。

在写移动端页面的时候，margin-bottom 不生效的时候，在父盒子overflow:hidden。

解决：给两个盒子都加一个父元素 div ,并设置成BFC区域。如:overflow:hidden

2，利用BFC解决包含塌陷

给子元素加margin-top：20可能时会带着父元素（父元素变margin-top:20）一起跑，变成父元素外边距 margin-top:20px。

解决：只需要将父元素变为BFC区域，将父盒子变成一个独立的区域，这样在BFC区域内部的任何操作，都不会影响到外部

3.清除浮动。

浮动会导致父元素高度塌陷。overflow：hidden可以清除浮动。BFC区域内的子元素任何边动都是不会影响到外部元素的。

4.BFC可以阻止标准流元素被浮动元素覆盖

浮动的元素会脱离文档流，跑到上一个层面，也就是和原本的元素们不在一个层面了。所以可能会导致浮动元素覆盖基本元素的问题。

<div class="aa"><div>
<div class="bb"></div>
.aa { 
    width:300px;
    height:100px;
}
.bb {
    
}