面试官:BFC是啥 开发中有哪些应用

2,657 阅读2分钟

什么是BFC

BFC(Block formatting context) 块级格式化上下文,它是一个独立的渲染区域,其中的元素不受外界的影响,同样的里面的元素也不会影响外面。

BFC 的布局规则

  • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
  • 内部的Box 会在垂直方向,一个接一个的放置;
  • Box 垂直方向的距离由margin决定;同一个Box中的相邻Box的margin会发生重叠
  • 每个盒子(块盒与行盒)的左边距从左往右格式化,即使浮动也是如此。
  • BFC的区域不会与float box重叠。(两栏布局原理)
  • 计算BFC的高度时,浮动元素也参与计算。(清除浮动原理)

如何创建BFC

  • float的值不是none;
  • position 的值不是relative或者relative;
  • display的值是inline-block、table-cell、flex、或者inline-flex;
  • overflow的值不是visible;

BFC的特性及应用

1. 同一个 BFC 下外边距会发生折叠

<style>
.box1{
    height: 200px;
    margin:30px;
    background: red;
}
.box2{
    height: 200px;
    margin:30px;
    background: yellow;
}
</style>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

从上图可以看出,两个 div 元素都处于同一个 BFC 容器下 (这里指 body 元素) 所以第一个 div 的下边距和第二个 div 的上边距发生了重叠,两个盒子的距离只有 30px;而不是相加60px;

这就是上面说的,BFC布局的第三条。

如果想避免重叠可以将其放在不同的BFC容器中;

<style>
	section{overflow: hidden;}
  .box1{
      height: 200px;
      margin:30px;
      background: red;
  }
  .box2{
      height: 200px;
      margin:30px;
      background: yellow;
  }
</style>
<body>
    <section>
        <div class="box1"></div>
    </section>
    <section>
        <div class="box2"></div>
    </section>
</body>

这样边距就变成了60px了;

2、BFC可以用来清除浮动(计算BFC的高度时,浮动元素也参与计算

使用overflow:hidden 清除浮动,是大家常用的功能;其原理就是利用了,出发了盒子的BFC;

我们都知道浮动的元素会脱离文档流

<style>
	ul{
      border:1px solid #000;
  }
  li{
      width:100px;
      height: 100px;
      float: left;
      background: red;
  }
  li:nth-child(2n){
      background: yellow;
  }
</style>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

我们看到ul 容器的高度只剩下了边框;

我们给ul 触发容器的 BFC,那么容器将会包裹着浮动元素;(添加overflow hidden;属性);

3、BFC 可以阻止元素被浮动元素覆盖

我们来实现一个,左边宽度固定右边自适应的布局;

<style>
	.let{width:100px;height:100px;float:left; background: red;}
  .right{height:200px; background: yellow;}
</style>
<body>
    <div class="let"></div>
    <div class="right"></div>
</body>

我们看到右边的元素环绕了左边的元素;如果想避免元素被覆盖,可触发第右边的元素的 BFC 特性,在右边的元素中加入 overflow: hidden,就会变成:

这也是实现,两列自适应布局的常见方法。

什么是IFC

Inline Formatting Context 行内格式化上下文

IFC的布局规则

1、IFC的元素,线框高度由其包含行内元素中最高的实际高度计算而来;

2、IFC的inline box一般左右都贴紧整个IFC;

3、IFC中不可能有块级元素,当插入块级元素时(如p中插入div)会产生两个匿名快与div分隔开,即产生两个IFC,每个IFC对外表现为块级元素,与div垂直排列。