从0开始学习BFC

为什么需要BFC?

<style>

  .red {

    background: red;

  }

  .blue {

    background: #1890ff;

  }

  .green {

    background: green;

  }

  p {

    margin: 20px 0;

  }

</style>

<body>

    <p class="red">1</p>

    <p class="blue">2</p>

    <p class="green">3</p>

</body>

最常见的问题就是margin折叠。div1和div2之间的间距是20px,而不是预想的40px。该问题创建BFC就可以解决，因为BFC不会影响其他元素的布局。

BFC是什么？

BFC：Box Formatting Context,直译为块级格式化上下文。在CSS2.1规范中定义的一个关于css渲染定位的概念。BFC是一个独立的渲染区域，规定该区域内部的box 如何布局，并且与这个区域的外部毫不想干。

在CSS2.1规范中，还定义了Inline formatting context（IFC）。CSS3中添加了G(grid)FC和F(flex)FC

如何创建BFC?

详情请看CSS2.1规范 https://www.w3.org/TR/CSS2/visuren.html#block-formatting

这里写个总结，满足以下条件之一的元素便会生成BFC。

根元素
浮动元素: float的值不为none
绝对定位元素: position的值为absolute或fixed
行内块元素: display: inline-block
表格单元格: display的值为table-cell，table-caption
overflow的值不为visible的元素
弹性盒子 display:flex或inline-flex

BFC的规则是什么？

内部的box会在垂直方向上一个接一个放置。
垂直方向的距离有margin决定，属于同一个BFC的两个相邻box的margin会发生重叠，与方向无关。
每个元素的margin box的左边与包含块border box的左边相接触。存在浮动也是如此。
BFC的区域不会与float的元素区域重叠。
计算BFC的高度时，浮动子元素也参与计算。
BFC就是页面上的一个隔离的独立容器，容器里的子元素不会影响到外面元素，反之亦然

回归问题

文章开头的问题？

三个div同属于一个BFC(此处是body)中,所以根据规则第二点，margin会发生重叠。

解决方案:

p标签外在添加一个容器，并设置属性overflow:hidden。这样就产生了3个BFC,3个p在3个不同的BFC中，就不会产生margin重叠的问题。

<style>

  .red {

    background: red;

  }

  .blue {

    background: #1890ff;

  }

  .green {

    background: green;

    display: flex;

  }

  p {

    margin: 20px;

  }

  .wrap {

    overflow: hidden;

  }

</style>

<body>

  <div class="wrap">

    <p class="red">1</p>

  </div>

  <div class="wrap">

    <p class="blue">1</p>

  </div>

  <div class="wrap">

    <p class="green">1</p>

  </div>

</body>

除了margin重叠还有其他的作用吗？

清除浮动

<style>

  .par {

    border: 5px solid #fcc;

    width: 300px;

    /* display: inline-block; */

  }

  .child {

    border: 5px solid #189ff0;

    width:100px;

    height: 100px;

    float: left;

  }

</style>

<body>

  <div class="par">

      <div class="child">1</div>

      <div class="child">2</div>

  </div>

</body>

参考规则第五点，计算BFC的高度时，浮动子元素也参与计算。形成BFC后，par就会把浮动子元素的高度也计算进去。

不和浮动元素重叠

<style>

  body {

      width: 100%;

      position: relative;

  }

  .aside {

      width: 100px;

      height: 150px;

      float: left;

      background: #f66;

  }

  .main {

      height: 200px;

      background: #fcc;

      /* overflow: hidden; */

  }

</style>

<body>

  <div class="aside"></div>

  <div class="main">

  </div>

</body>

形成自适应两列布局。应用了BFC规则第四点。

巴特西