BFC是什么?

BFC定义

BFC(Block Formatting Context),块级格式化上下文,是一个独立的烘托区域,让处于BFC内部的元素与外部的元素彼此阻隔,使表里元素的定位不会彼此影响,举个比如阐明一下:

<div class="box1" id="bfc1">
    <div class="box2"></div>
    <div class="box3" id="bfc2">
      <div class="box4"></div>
      <div class="box5"></div>
    </div>
</div>

上面的比如中,bfc1是一个BFC区域,包括box2,box3,bfc2也是一个BFC区域,包括box4,box5,可是bfc1不包括box4,box5,所以每一个BFC区域只包括子元素,不包括子元素的子元素

每一个BFC区域都是彼此独立的,互不影响的

触发BFC的条件

  1. body根元素,body就是一个BFC区域;
  2. 起浮,不包括none;
  3. 定位,肯定定位absolute或固定定位fixed(二者都具有行内块特色);
  4. display为inline-block、table-cell、table-caption;
  5. overflow为hidden、scroll、auto,不为visible
  6. 弹性布局flex。

任意满意以上一个条件,元素就成为了一个BFC。

BFC解决了什么问题?

1.外边距陷落问题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      width: 200px;
      height: 200px;
      background-color: aquamarine;
      margin: 50px;
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <div class="box"></div>
</body>
</html>

这里给两个盒子都加了外边距,可是两个盒子的垂直距离并不是50+50=100px,而是50px,发生了外边距陷落问题。

BFC是什么?怎么利用BFC解决问题?

解决办法:将这两个盒子放入BFC区域中:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .bfc{
      overflow: hidden;
    }
    .box{
      width: 200px;
      height: 200px;
      background-color: aquamarine;
      margin: 50px;
    }
  </style>
</head>
<body>
  <div class="bfc">
    <div class="box"></div>
  </div>
  <div class="bfc">
    <div class="box"></div>
  </div>
</body>
</html>

BFC是什么?怎么利用BFC解决问题?

2.包括陷落问题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father{
      width: 200px;
      height: 200px;
      background-color: aquamarine;
    }
    .son{
      width: 50px;
      height: 50px;
      background-color: hotpink;
      margin-top: 100px;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>
</html>

当父元素包括子元素,子元素设置了外边距的时候,会把父元素也拉下来,如图:

BFC是什么?怎么利用BFC解决问题?

为了解决这个问题,在父元素增加条件(如增加overflow:hidden;),把父元素变为BFC区域

BFC是什么?怎么利用BFC解决问题?

3.清除起浮的影响

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father{
      width: 200px;
      background-color: aquamarine;
    }
    .son{
      width: 50px;
      height: 50px;
      background-color: hotpink;
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
  </div>
</body>
</html>

BFC是什么?怎么利用BFC解决问题?

这里父元素没有设置高度,高度是由子元素撑开的,此刻想把子元素起浮,在.son增加float:left,作用如下:

BFC是什么?怎么利用BFC解决问题?

此刻子元素起浮,父元素由于本身没有高度,看起来就消失了,为了解决这个问题,在在父元素增加条件(如增加overflow:hidden;),把父元素变为BFC区域

BFC是什么?怎么利用BFC解决问题?

4.自动适应

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1{
      width: 200px;
      height: 200px;
      background-color: hotpink;
      float: left;
    }
    .box2{
      width: 400px;
      height: 300px;
      background-color: aquamarine;
    }
  </style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>
</html>

BFC是什么?怎么利用BFC解决问题?

粉色盒子左起浮,导致起浮元素掩盖在处于标准流的绿色盒子上,如果想不掩盖,在绿色盒子上加条件使之变为一个BFC,作用如下。

运用场景:绿色盒子根据粉色盒子自适应变化。

BFC是什么?怎么利用BFC解决问题?

总结

要根据BFC的特色:BFC区域彼此独立,互不影响,在需求的地方运用。

BFC是什么?怎么利用BFC解决问题?