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

·  阅读 1664

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,发生了外边距塌陷问题。

image.png

解决办法:将这两个盒子放入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>
复制代码

image.png

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>
复制代码

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

image.png

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

image.png

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>
复制代码

image.png

这里父元素没有设置高度,高度是由子元素撑开的,此时想把子元素浮动,在.son添加float:left,效果如下:

image.png

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

image.png

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>
复制代码

image.png

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

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

image.png

总结

要根据BFC的特点:BFC区域相互独立,互不影响,在需要的地方使用。

image.png

分类:
阅读
标签:
收藏成功!
已添加到「」, 点击更改