Block formatting context(块级格式化上下文)

时间：2021-05-15 16:17:41

今天看到豆瓣面试官的一篇文章，讲到关于CSS中的一个知识点：Block formatting context  ，感觉这个确实挺有用，同时我也挺赞同作者的一些观点的，这里就不展开谈我的感受了， 此文只聊聊技术。

1.什么是Block formatting context？

　　Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局，就是说处在于不同Block Formatting Context环境中的元素是互不侵犯的。

2.Block formatting context的触发条件？

  • the root element or something that contains it
  • floats (elements where float is not none)
  • absolutely positioned elements (elements where position is absolute or fixed)
  • inline-blocks (elements with display: inline-block)
  • table cells (elements with display: table-cell, which is the default for HTML table cells)
  • table captions (elements with display: table-caption, which is the default for HTML table captions)
  • elements where overflow has a value other than visible
  • flex boxes (elements with display: flex or inline-flex)

3.Block formatting context有什么用？

  • Block Formatting Context可以阻止边距折叠（margin collapsing）。我们知道在一般情况下，两个上下相邻的盒子会折叠它们垂直方向接触到的边距，这种情况只会发生在同一个Block Formatting Context中。换句话说，在同一个布局环境中（Block Formatting Context）是边距折叠的必要条件。这也就是为什么浮动的元素和绝对定位元素不会发生边距折叠的原因（当然还有很多种情况也不会折叠）。　　

*{margin:0; padding:0}

body{width:100px;}

#one, #two{

    float:left;    /*去掉float:left上下div的之间的间距将折叠为10px*/

    width:100px;

    height:100px;

    margin:10px;

}

#one{

    background:red;

}

#two{

    background:blue;

}

<div id="one"></div>

<div id="two"></div>

调试请猛戳这里

  • Block Formatting Context可以包含内部元素的浮动。
<style type="text/css">

    html, body {

      margin: 0;

      padding: 0;

    }

    #red, #orange, #yellow, #green {

      width: 100px;

      height: 100px;

      float: left;

    }

    #red {

      background: red;

    }

    #orange {

      background: orange;

    }

    #yellow {

      background: yellow;

    }

    #green {

      background: green;

    }

</style>

  <div id="c1">

    <div id="red"></div>

    <div id="orange"></div>

  </div>

  <div id="c2">

    <div id="yellow"></div>

    <div id="green"></div>

  </div>

在上面的代码本意是做一个两行两列的布局，但是由于#red, #orange, #yellow, #green这四个div同在一个布局环境中，即便通过#c1, #c2这两个div划分，浮动之后它们还会一个接着一个排列，并不会换行。我们要做的就是把这四个div两两划分到不同的布局环境之中，从而闭合浮动。通过上面的分析，让#c1形成新的Block Formatting Context就可以解决问题。

调试请猛戳这里

  • Block Formatting Context可以阻止元素被浮动覆盖

这个就是上面提到的豆瓣的面试官用到的一个特性，我们来看一个实例：

<!DOCTYPE html>

<html>

<head>

  <title>Demo</title>

  <style type="text/css">

    html, body {

      margin: 0;

      padding: 0;

    }

    #left {

      width: 100px;

      height: 100px;

      background: red;

      float: left;

    }

    #right {

      overflow:hidden;

      height: 200px;

      background: yellow;

    }

  </style>

</head>

<body>

  <div id="left"></div>

  <div id="right"></div>

</body>

</html>

调试请猛戳这里

知道这个特性之后再来看豆瓣面试官的demo就清楚为什么会这样了！

=======================================

参考资料：

相关文章