BFC的简单介绍

什么是BFC哪？BFC - Block Formatting Context 块级格式化上下文 BFC的定义。这是官方文档对BFC的介绍但其实我们很难读明白。接下来我就为大家主要介绍以下BFC的要点

一、BFC特点

1.定义中所说的块级指的就是块级作用域的意思，它只能包括他的子元素，并不包括孙子元素

2.每一个BFC区域都是独立的，密闭的。

二、什么样的元素是BFC？

1. body根元素
2. 设置浮动，不包括none
3. 设置定位，absoulte或者fixed
4. 行内块显示模式，inline-block
5. 设置overflow，即hidden，auto，scroll
6. 表格单元格，table-cell
7. 弹性布局，flex

满足以上条件之一的就可以被称作BFC元素。

首先就是我们比较熟悉的body，他就是一个BFC。

三、BFC能用来作什么

1.可以避免外边距合并，在学css的时候，外边距合并是我们需要注意的事情，当我们使用了BFC可以巧妙的解决外边距，由于每一个BFC区域是完全与世隔绝的，并不会对外界产生影响

       .one,
        .two{
            width: 100px;
            height: 100px;
            background-color: cyan;
            margin: 100px;
        }
        .two{
            position: absolute;
        }

 <div class="f">
       <div class="one"></div>
       <div class="two"></div>
        
  </div>

当给two添加一个定位的时候他就是一个BFC，所以就可以不受外界影响

2.可以避免外边距内嵌

 .one{
           position: absolute;
            width: 100px;
            height: 100px;
            background-color: cyan;
            /* margin: 100px; */
            margin-top: 2px;
        }
       .f{
           width: 200px;
           height: 200px;
           background-color: pink;
           margin: 200px;
       }

   <div class="f">
       <div class="one"></div>
  </div>

3.当遇到浮动引起的父盒子高度为0时，也可以通过给父盒子添加overflow：hidden来清除浮动

 .one,
    .two,
    .three,
    .four,
    .five{
        float: left;
  
            width: 100px;
            height: 100px;
            background-color: cyan;
            /* margin: 100px; */
            margin-left: 2px;
    }
    .f{
        overflow: hidden;
    }
     .a{
         width: 200px;
         height: 200px;
         background-color: black;
     }
      

 

  <div class="f">
       <div class="one"></div>
       <div class="two"></div>
       <div class="three"></div>
       <div class="four"></div>
       <div class="five"></div>
  </div>
  <div class="a"></div>