前端面试——BFC相关问题

前言

最近在看前端面试相关的内容，顺便对有些内容做个整理这篇也是参照了两位大佬的内容：

1.三元博客 2.学习 BFC (Block Formatting Context)

什么是BFC

MDN中是这样解释的：

BFC(Block Formatting Context):

A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.

翻译：块格式化上下文包含创建它的元素内部的所有内容，这些内容不包含在创建新的块格式化上下文的后代元素内部。

<div class='box1 BFC'>
  <div class='box2'> </div>
  <div class='box3 BFC'>
      <div class='little'></div>
      <div class='little'></div>
  </div>
   <div class='box4'>
      <div class='box5'></div>
   </div>
</div>

box1是一个BFC，那么该块格式上下文包含box2、box3、box4、box5,因为box3是一个新的块格式上下文，所以其后代元素不包含在box1的块格式上下文中

BFC的创建方法/触发条件

根元素
浮动元素（float不为none）
绝对定位（position为absolute/fixed）
overflow 值不为 visible 的块元素
弹性盒 flex boxes (元素的display: flex或inline-flex)
表格单元格
网格元素（display为 grid 或 inline-grid 元素的直接子元素）等等

BFC渲染规则

BFC是一个独立的容器，里外元素不会相互影响
计算BFC的高度的时候浮动元素也要参与计算
内部的盒会一个接一个的垂直放置

BFC的作用

1.防止浮动导致父元素高度坍塌

//这里借用三元大佬的例子
<style>
  .container {
    border: 10px solid red;
  }
  .inner {
    background: #08BDEB;
    height: 100px;
    width: 100px;
  }
</style>

<body>
  <div class="container">
    <div class="inner"></div>
  </div>
</body>

前端面试——BFC相关问题将inner元素设置为浮动

  .inner {
    float: left;
    background: #08BDEB;
    height: 100px;
    width: 100px;
  }

前端面试——BFC相关问题这时如果我们对父元素设置BFC后, 这样的问题就解决了:

.container {
    border: 10px solid red;
    overflow: hidden;
}

2.避免外边距重叠

<div class='box1'>
      <div class='box2'></div>
      <div class='box2'></div>
      <div class='box2'></div>
  </div>
  <style>
        * {
        margin: 0;
        padding: 0;
    }
    .box1 {
      width: 300px;
      height: 300px;
      overflow: hidden;
      background-color: black;
    }
    .box2 {
      margin: 10px;
      width: 50px;
      height: 50px;
      background-color: green;
    }
</style>

前端面试——BFC相关问题可以看到三个box2之间的距离都是10px，因为它们同处于一个BFC中，就造成了外边距重叠怎么解决呢？我们对box2用一个BFC包裹起来

  <div class='box1'>
      <div class='box2'></div>
      <div class="container">
        <div class='box2'></div>
      </div>
      <div class='box2'></div>
  </div>
  <style>
        * {
        margin: 0;
        padding: 0;
    }
    .box1 {
      width: 300px;
      height: 300px;
      overflow: hidden;
      background-color: black;
    }
    .box2 {
      margin: 10px;
      width: 50px;
      height: 50px;
      background-color: green;
    }
    .container {
      overflow: hidden;
    }

前端面试——BFC相关问题这样就完美啦！

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用？: 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。

提示下载完但解压或打开不了？: 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或联络我们.。

找不到素材资源介绍文章里的示例图片？: 对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。