BFC

厕所打你

于 2021-01-01 12:00:24 发布

阅读量620

点赞数 3

分类专栏： css 文章标签： html css

本文链接：https://blog.youkuaiyun.com/weixin_44645309/article/details/112058351

版权

css 专栏收录该内容

12 篇文章

订阅专栏

一、定义

一个盒子只要满足以下条件之一：

（1）float：left、right
（2）position: absolute、fixed
（3）display：inline-block、table-cell、flex、table-caption、inline-flex
（4）overflow: hidden、scroll、auto
（5）html根元素

就会触发bfc，就可以称这个盒子为一个bfc容器，那么一个bfc容器有什么特点呢？

二、bfc特性

1、独立性

bfc容器是一个独立容器，容器里的子元素不受容器外部影响，同样的，子元素也无法影响外部元素。

2、外边距重叠

同一个bfc容器中，相邻的两个元素的垂直方向的margin会重叠。
代码：

<!DOCTYPE html>
<html>

<head>
  <style>
    .container {
      overflow: hidden;
    }
    p {
      margin: 20px;
    }
  </style>
</head>

<body>
  <div class="container">
    <p>aaaaaa</p>
    <p>bbbbbb</p>
  </div>
</body>

</html>

显示结果：
在这里插入图片描述

在这里插入图片描述

可以看出，两个段落之间的垂直margin重叠。
要解决外边距重叠的问题，将两个段落放在不同的bfc容器中即可：
代码：

<!DOCTYPE html>
<html>

<head>
  <style>
    .container {
      overflow: hidden;
    }
    p {
      margin: 20px;
      /* background-color: rgb(10, 219, 232); */
    }
    .newBfc {
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div class="container">
    <p>aaaaaa</p>
    <div class="newBfc">
      <p>bbbbbb</p>
    </div>
  </div>
</body>

</html>

显示结果：
在这里插入图片描述

问题解决。

3、计算BFC容器的高度时，浮动元素也参与

可以利用这一特性来解决，由于子元素浮动导致父元素高度坍塌的问题。
（1）正常盒子：
代码

<!DOCTYPE html>
<html>

<head>
  <style>
    .a {
      width: 200px;
      background-color: red;
    }
    .b {
      width: 100px;
      height: 100px;
      background-color: yellow;
      float: left;
    }
  </style>
</head>

<body>
  <div class="a">
    <div class="b"></div>
  </div>
</body>

</html>

显示结果:
在这里插入图片描述
可见，子元素b浮动以后，父元素的高度为0。

（2）变为bfc容器后：

代码:

<!DOCTYPE html>
<html>

<head>
  <style>
    .a {
      overflow: hidden;
      width: 200px;
      background-color: red;
    }
    .b {
      width: 100px;
      height: 100px;
      background-color: yellow;
      float: left;
    }
  </style>
</head>

<body>
  <div class="a">
    <div class="b"></div>
  </div>
</body>

</html>

显示结果：
在这里插入图片描述
可见父元素的高度没有坍塌。

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

（1）正常情况下：

代码：

<!DOCTYPE html>
<html>

<head>
  <style>
    .container {
      width: 500px;
      margin: 0 auto;
    }
    .a {
      width: 200px;
      height: 200px;
      background-color: red;
      float: left;
    }
    .b {
      height: 300px;
      background-color: yellow;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="a"></div>
    <div class="b"></div>
  </div>
</body>

</html>

显示结果：
在这里插入图片描述
（2）现在把b放到一个bfc容器里
代码：

<!DOCTYPE html>
<html>

<head>
  <style>
    .container {
      width: 500px;
      margin: 0 auto;
    }
    .a {
      width: 200px;
      height: 200px;
      background-color: red;
      float: left;
    }
    .bfc {
      overflow: hidden;
    }
    .b {
      height: 300px;
      background-color: yellow;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="a"></div>
    <div class="bfc">
      <div class="b"></div>
    </div>
  </div>
</body>

</html>