什么是BFC

Notion笔记链接

外链的图片显示不出来，复制下方链接到浏览器中打开即可完整阅读我在Notion中的笔记
https://www.notion.so/BFC-4240fc261cb146c399edc324552f2930

什么是BFC？

在回答什么是bfc之前，我想先问你一个问题什么是色情？

什么是色情？

裸体算色情么，显然不是。

联邦最高法院大法官斯图尔特更有一句名言：我不知道什么是色情，不过

“我看了之后，就能知道”（I know it when I see it）

所以我们先用JS Bin写几个例子看看BFC的功能，最后来看什么是BFC这个问题。

BFC的功能

竖直margin合并

• 功能1（竖直margin合并）

  • son1和son2的marin都为10px，但是son1的margin-bottom和son2的margin-top合并了

父亲管儿子

• 功能2（爸爸包住儿子 儿子包住孙子）

  • 爸爸包住儿子

      
      
      
        
        
      
      
      
    
        
    
      
      
      
    
      .parent{
        border: 10px solid gray;
      }
      .son{
        height:100px;
        background:pink;
        width:200px;
      }
    

  此时父元素可以包住子元素，但是如果子元素浮动起来脱离文档流之后，还能包住么？

  • 爸爸包不住儿子

    答案是包不住

  • 父元素如何能包住浮动的子元素呢? 答案 可以触发BFC （可以但不是唯一）

    • 浮动

    • 绝对定位

    • ‘overflow’不为’visible’

    • display:flow-root

    • BFC还很多种方式可以让父元素包住子元素，这里就不一一演示了。

  • 还有一种情况，父元素也包不住子元素。子元素有margin-top,父元素没有border

    • 此时父元素正好被子元素盖住了，同时子元素的margin在父元素之外。

    • 触发父元素BFC可以使父元素包住子元素

    • 或者给父元素加一个border

  • 如果子元素内部有一个孙子元素也是浮动元素，那么父元素可以包住孙子么。这要分两种情况：

    • 情况1：son元素高度固定

      虽然此时子元素也是BFC，但是此时父元素管不到孙子元素，同时，子元素的高度被限制了，孙子元素才能脱离父元素怀抱。那么有什么办法可以使孙子元素也被父元素包住呢。让子元素包住孙子元素，再使父元素包住son元素即可。

    • 情况2：不限制son元素高度。父元素（子元素（孙子元素））

让两个相邻元素划清界限 - 布局

• 功能3（让两个相邻的元素划清界限）

  • 根据文档流原理，两个div会上下排列

  • 但是当我们将Tom浮动以后，2个div会重叠在一起。并且Jerry中的内容在Tom这个div之外。

  • 但是如何让Tom和Jerry划清界限呢？

    1. 触发Jerry的BFC

       注释的几种方法都可以触发Jerry的BFC，但是float:left比较特殊，它不会使Jerry的宽度自适应。

       • 划清界限后，如果想让Tom和Jerry保持一点距离，有两种方案

         • 方案一：在Tom上加margin-right

         • 方案二：在Jerry上加margin-left:（tom的宽度加上距离）。例子中tom的width为100px,若想让tom和jerry的距离为30px，则，jerry的margin-right:130px

    2. 使用flex布局

清除浮动

使用清除浮动也可以实现爸爸包住儿子的功能。

• .clearfix

    .clearfix::after{
    	content:'';
    	display:block;
    	clear:both;
    }
  

不要使用BFC来清除浮动

什么时候使用BFC

BFC是时代的产物…需要使用BFC的时候，都可以使用其他方式实现

使用BFC的究极场景：面试的时候使用

什么是BFC？

现在你还纠结什么是BFC么？

看看MDN是如何解释BFC

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

下列方式会创建块格式化上下文：

• 根元素()

• 浮动元素（元素的 [float](https://developer.mozilla.org/zh-CN/docs/Web/CSS/float) 不是 none）

• 绝对定位元素（元素的 [position](https://developer.mozilla.org/zh-CN/docs/Web/CSS/position) 为 absolute 或 fixed）

• 行内块元素（元素的 [display](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display) 为 inline-block）

• 表格单元格（元素的 [display](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display)为 table-cell，HTML表格单元格默认为该值）

• 表格标题（元素的 [display](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display) 为 table-caption，HTML表格标题默认为该值）

• 匿名表格单元格元素（元素的 [display](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display)为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）

• [overflow](https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow) 值不为 visible 的块元素

• [display](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display) 值为 [flow-root](https://drafts.csswg.org/css-display/#valdef-display-flow-root) 的元素

• [contain](https://developer.mozilla.org/zh-CN/docs/Web/CSS/contain) 值为 layout、content或 的元素

  paint

• 弹性元素（[display](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display)为 flex 或 inline-flex元素的直接子元素）

• 网格元素（[display](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display)为 grid 或 inline-grid 元素的直接子元素）

• 多列容器（元素的 [column-count](https://developer.mozilla.org/zh-CN/docs/Web/CSS/column-count) 或 [column-width](https://developer.mozilla.org/zh-CN/docs/Web/CSS/column-width) 不为 auto，包括 column-count 为 1）

• column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

块格式化上下文包含创建它的元素内部的所有内容.

块格式化上下文

作者：秀强
出处：https://www.notion.so/BFC-4240fc261cb146c399edc324552f2930
版权所有，欢迎保留原文链接进行转载：)