BFC及其作用

一、什么是BFC

    BFC中文名称是块级格式上下文，他是一个独立渲染的区域，内部的布局不会影响到外面。

    定义：

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

二、哪些方法可以创建BFC

1、浮动元素，即float属性值不为none的元素

2、position属性值是absolute或fixed的元素

3、非块级盒子的块级容器：display=inline-block;table;table-cell

4、overflow属性值不为visiable的块级盒子

三、BFC的特性

1、BFC区域不会与浮动元素区域重叠

2、BFC计算高度时会把内部的浮动元素高度也计算在内

四、BFC可以干啥

1、解决垂直布局的块级盒子上下外边距折叠

  如果有垂直布局的盒子，上盒子设置下外边距20px，下盒子设置上外边距30px，那么最后的布局只会让较大的外边距生效，不会一起生效。

  这时让其中一个盒子创建BFC，就能解决外边距折叠问题。如套上div大盒子，设置overflow:hidden

2、解决父子元素上外边距塌陷问题

  若有互相嵌套的块级元素，父子元素紧贴，给子元素设置上外边距，不会作用在子元素上，上外边距会作用在父元素上，把父元素拉下来

  这时给子元素创建BFC，就能解决这个问题

 小栗子：

html
<div class="box">
    <div class="demo"></div>
</div>
css
.box{width: 300px;height: 300px;background-color: black;}
.demo{width: 100px;height: 100px;background-color: red;margin: 20px;}

  从图上看出子元素的上外边距没有在自身上起效果，反而在父盒子上起效果，创建BFC

html
<div class="box">
    <div class="demo"></div>
</div>
css
.box{width: 300px;height: 300px;background-color: black;overflow: hidden;}
.demo{width: 100px;height: 100px;background-color: red;margin: 20px;}

3、清除浮动

   当父元素内部包含的子元素是浮动元素，且父元素自身没有设置高度时，父元素的高度就会塌陷，因为浮动元素脱离标准流，撑不起来盒子，可以通过给父盒子加overflow:hidden解决。