见过却不一定了解过的前端面试题-BFC

BFC

块级格式化上下文（Block Formatting Context）。

什么叫块级格式化上下文？
在块盒子布局过程中，使用以下css属性进行布局所产生的的区域就是块级格式化上下文*。

根元素(<html>)
浮动元素（元素的 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 值不为 visible 的块元素
display 值为 flow-root 的元素
contain 值为 layout、content或 paint 的元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
网格元素（display为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不为 auto，包括 ``column-count 为 1）
column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

块级格式化上下文对浮动定位与清楚浮动很重要。浮动定位和清除浮动时只会对同一个BFC内的元素起作用，不会影响其它BFC的布局。外边距折叠也只会对同一BFC内的元素起作用。

浮动：

<style>
    * {
      margin: 0;
      padding: 0;
    }
    
    .box {
      background: red;
      width: 200px;
      height: 50px;
    }
    
    .left {
      float: left;
      width: 50px;
      height: 100px;
      background: green;
    }
</style>

<div class='box'>
  <div class='left'>我是浮动元素</div>
  我是浮动元素的父节点
</div>

未浮动

浮动之后

父元素创建BFC

根据上面的代码以及效果图可以得出，left块盒子从未float到float脱离文档流并创建了一个BFC之后，再到box块盒子创建BFC的过程，描述出BFC对浮动的影响。

外边距塌陷：

<style>
    * {
      margin: 0;
      padding: 0;
    }
    
    div {
      width: 100px;
      height: 100px;
      margin: 100px;
    }
    
    .box1 {
      background: red;
      
    }
    
    .box2 {
      background: blue;
      
    }
  
  </style>
<div class='box1'></div>
<div class='box2'></div>

未创建BFC

两个相邻的div之间会发生外边距合并的问题，若要解决这个问题这就需要用到BFC，创建新的BFC便能避免这个问题的发生。

<style>
    * {
      margin: 0;
      padding: 0;
    }
    
    .box {
      overflow: hidden;
    }
    
    .box1 {
      width: 100px;
      margin: 100px;
      background: red;
      height: 100px;
    }
    
    .box2 {
      background: blue;
      height: 100px;
      width: 100px;
      margin: 100px;
    }
</style>
<div class='box'>
  <div class='box1'></div>
</div>

<div class='box'>
  <div class='box2'></div>
</div>

创建新的BFC

将它们放到不同的BFC当中，便能解决外边距塌陷的问题。

对于以上这两种css的问题，相信很多人都遇到过，也能解决，但是不清楚为什么会这样，也不知道其含义，但是希望看完这篇文章之后你，我，他都懂了。

来源：CSDN

作者：初竹殇

链接：https://blog.csdn.net/weixin_38031256/article/details/103584567

标签

bfc