透析BFC问题（宝，我输液了，输的想你的夜）-一一网

一、BFC到底是什么？

BFC(Block Formatting Context)也叫”块格式化上下文”。
简单来说就是，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局，起到隔离保护的作用。
BFC好比是一个规则，举个?子，
就好比是西游记三打白骨精里面，悟空划了一个圈让师傅和师弟呆在圈里，这样白骨精就不能伤害到师傅和师弟了哈哈哈，那么这个圈我们就可以称之为BFC。
那么如何用BFC解决各种问题呢?我相信这也是小伙伴们关心的！

二、BFC解决了哪些问题？

Ⅰ 使用定位脱离文档流，达到固定作用。`position:absolute或者fixed`

例如我们现在回到掘金主页，我们可以看到右边的这个广告一直固定在这个位置，它不会影响外面的布局，就是创建BFC的方式之一。

Ⅱ 实现两栏布局 `overflow:不是visible;display:inline-block或者flex`

这个在实现两栏布局的时候经常会遇到背景丢失的问题。

<!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>BFC的创建方式</title>
  <style>
    .wrapper {
      background: url(./images/bg1.jpg);
    }

    img {
      width: 300px;
      /* float: left; */
    }

    .text {
        width：300px;
      /* float: left; */
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <img src="https://juejin.cn/post/images/输液.png" >
    <div class="text">
      <h2>输液是什么梗</h2>
      <p>昨天，国民老公凭一己之力点燃了整个中国。
        是他，他是六月的火，是夜空的星，是男人的梦想，是吴亦凡。
        是他，凭一己之力，拉低了男同胞对金钱和权力的幻想，这个男人用实际行动告诉其他男人：生为舔狗，我很骄傲。
        也是他，凭借着满腔爱意，拉低了女同胞对于总裁和爱情的幻想，你以为的霸道总裁，实际上是“想你的夜”。</p>
    </div>
  </div>
</body>

</html>
复制代码

我们现在要实现两栏布局，首先给img加上float:left,然会给text加上float:left。

效果：

我们惊讶的发现虽然成功完成了两栏布局，但是之前设置的背景消失了，这个时候我们就需要通过创建BFC来清除浮动了，从而不影响外面的布局。
给父元素.wrapper盒子添加overflow：auto这里设置hidden，scroll等也是没问题的，只要不是visible都行。
看效果：

看！我们的背景回来了，因为BFC把我们的图片和文字包裹起来了，限制它们在这个区域里面。

Ⅲ 解决外边距塌陷问题 `display:inline-block`

<!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>BFC的创建方式</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    h1 {
      background-color: yellow;
    }

    p {
      background-color: yellow;
    }

    .wrapper {
      width: 100%;
      height: 400px;
      background-color: black;
    }

    .image {
      width: 100%;
      height: 300px;
      /* margin-top: 20px; */
    }

    .wrapper img {
      height: 300px;
    }
  </style>
</head>

<body>
  <h1>超飒、超A的孙一宁</h1>
  <div class="wrapper">
    <div class="image">
      <img src="https://juejin.cn/post/images/孙一宁1.jpg" >
    </div>
  </div>
  <p>孙一宁是一名网红，原名孙健宁，湖南常德人，曾用网名”我又杀猪了“、”iiiis“。孙一宁之前的账号昵称“我又杀猪了”，她用这个号骗钱骂人被发现后决定退网。四年后，换ID重生后对过去行为发表道歉，承认了自己的错误。
    2021年6月5日，孙一宁在直播间带着朋友一起戏弄残疾人老奶奶犯了众怒。孙一宁用帮老人家投票的方式连麦互动，偶尔还刷礼物，然而当老人家正式唱歌后，孙一宁一帮人就吵吵闹闹，言语轻佻，吐槽嘲笑“什么样的人都能直播了?吓死我了”“咱们现在就是一个仙人状态”，老奶奶的ID就是“仙人”等。
    [1] </p>
</body>

</html>
复制代码

我们现在想将图片设置距离黑色区域顶部一点距离,

.image {
margin-top:20px
}
复制代码

效果：

让我们意外的是没有实现我们的想法，整个外边距都往下移了。这里就是发生了外边距塌陷，也就是外边距重合，黑色区域和图片区域外边距重合了，这个时候又该BFC发挥作用了，我们需要把图片隔离起来，给它划圈圈，给图片区域添加display:inline-block

.image {
display:inline-block
margin-top:20px
}
复制代码

效果：

奈斯，解决了外边距塌陷的问题，我们终于实现了我们想要的效果！

总结

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
这里再给出另外一些BFC的创建方式：

根元素（）
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值）
表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
匿名表格单元格元素（元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table）
overflow 计算值(Computed)不为 visible 的块元素
display 值为 flow-root 的元素
contain 值为 layout、content 或 paint 的元素
弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width (en-US) 不为 auto，包括 column-count 为 1）
column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中。