BFC 学习进行时

这是我参与8月更文挑战的第14天，活动详情查看：8月更文挑战

谈到BFC，首先我们来看待一个经典的CSS样式问题: 父元素高度塌陷

父元素高度塌陷实例

• 正常情况，我会想让子元素撑起父元素，如图所示

  .father {
      background-color: pink;
  }
  .son {
      width: 200px;
      height: 200px;
      background-color: skyblue;
  }
  ​
  <div class="father">
      <div class="son">子元素</div>
  </div>
  

  

• 但天有不测风云，某个开发同学需要把子元素的位置从左侧移动到右侧去，加了一行代码，结果悲剧了，如图所示，原本我们是想让子元素撑起父元素的，但因为子元素浮动导致其脱离文档流，造成父元素高度塌陷，父元素没有高度了，那么设置在父元素上的背景色、阴影啊啥的都不起作用了！

  .son {
      float: right
  }
  

  

• 解决方案，同样一句代码，但是是给父元素加的，加完之后立马正常，艾 就这么神奇

  .father {
      overflow: hidden;
  }
  

  

那么为什么呢？overflow: hidden;究竟有什么魔力，为什么是要加在父元素上面呢？带着 这俩个问题，我们将进入，介绍BFC

BFC

BFC Block Formatting Context，块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域，这是MDN官方给的原话。emm话说，我也是一脸懵的进来，一脸懵的出去....为啥不能讲点大白话？

经过查阅资料后终于明白，这玩意（BFC）其实就是给目标元素创建了一个完全独立的空间，里面的影响不到外面，外面影响不到里面，在计算父元素的高度时，会计算浮动子元素的高度，这里解释了第二个问题，为什么要加在父元素上，是因为要使父元素计算高度时计算浮动子元素的高度。

标准文档流（正常）的情况下，父元素的高度在没有设置的情况下，是根据子元素的高度进行自动计算得到的（由子元素撑起），但是特殊情况下子元素脱离文档流（浮动或者绝对定位的时候），这时候父元素自动计算高度时，并不会去计算浮动子元素的高度，这时候就会产生本文一开始的那个常见问题：父元素高度塌陷

创建BFC

既然知道如何解决父元素高度塌陷问题（解决方案：就是给父元素创建BFC），接下来就是怎么创建BFC了，创建有很多种方式，比较全的可以去看看 **BFC -MDN**的相关介绍，常用的用以下几种方式：

• 浮动元素

  float: left/right;  // 不为none
  

• 绝对定位元素

  position: absolute/fixed;   // 脱离标准文档流
  

• 块元素设置的overflow不为visible

  overflow: hidden/auto/scroll...等等，只要不为visible的块元素
  

  这里就解释了上面的两个问题中的第一个，为什么overflow：hidden有魔力，因为它能给元素创建BFC

• 常用清除浮动方式（无害）- 考点

  // 添加类，利用伪元素
  .clearfix::after {
    content: "";  /* 伪元素必须设置 content 属性 */
    display: block;  /* 清除浮动 clear 属性适用于浮动和非浮动元素 */
    clear: both;  /* 关键:清除左右浮动 */
  }