BFC原理转载自https://zhuanlan.zhihu.com/p/25321647

时间：2018-05-19 17:09:11 阅读：569 评论：0 收藏：0 [点我收藏+]

标签：行内元素位置定位 over screen 其他页面内容渲染

转载自：https://zhuanlan.zhihu.com/p/25321647

学习前端以来，一直觉得css比js要难一些，对一些css加一个属性得到意想不到的效果，往往知其然，不知其所以然，还是要持续深入学习~

周六来加班学习的我，看到好东西抄一波。（怕啥时候想找没了，作者写的很好，可以点开原作者原文点赞）

一：常见定位方案

- 普通流

在普通流中，元素按照其在HTML中的先后位置从上至下布局，在此过程中，行内元素水平排列，

直到此行被占满然后换行，块级元素则是会被渲染为完整的一个新行。可以说，普通流中元素的

位置由该元素在HTML文档中的位置决定。

- 浮动

在浮动布局中，元素会按照普通文档流的位置出现，然后根据浮动的

方向尽可能的往左/右偏移

- 绝对定位

绝对定位中，元素会整体脱离文档流，绝对定位不会给其兄弟元素造成影响。

二：BFC概念

Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。

它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素

将如何定位，以及和其他元素的关系和相互作用。

那么 BFC 是什么呢？

BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不

会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

三：触发BFC

　　　　只要元素满足下面任一条件即可触发 BFC 特性：

body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)

四：BFC特性及应用

同一个BFC下，会发生外边距合并。

块级元素的上外边距和下外边距有时会合并成一个外边距。

会发生外边距合并的三个基本情况：1，相邻块级元素2，父元素与第一个或最后一个子元素之间3，空的块级元素

<head>
div{
    width: 100px;
    height: 100px;
    background: lightblue;
    margin: 100px;
}
</head>
<body>
    <div></div>
    <div></div>
</body>

技术分享图片

从效果上看，因为两个div同属于一个BFC容器下（body）所以发生了上下外边距合并。

首先这不是 CSS 的 bug，我们可以理解为一种规范，如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。

    div{
      overflow: auto;//hidden//scroll都可以
    }
    p{
      width: 100px;
      height: 100px;
      background-color: lightblue;
      margin:100px;
    }

  <body>
    <div class="">
      <p></p>
    </div>
    <div class="">
        <p></p>
    </div>
  </body>

此时，两个盒子间距变成200px，没有发生外边距合并现象。

技术分享图片

2.BFC可以清除浮动

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

    .container{
      border: 1px solid #000;
    }
    .son-float{
      width: 100px;
      height: 100px;
      background-color: #ccc;
      float: left;
    }
  </style>
  <body>
    <div class="container">
      <div class="son-float">
      </div>
    </div>
  </body>

技术分享图片

由于元素脱离文档流，父元素高度只剩下2px边距高度。如果触发容器的BFC，那么容器将会包裹浮动元素。（清除浮动）

  <style media="screen">
    .container{
      border: 1px solid #000;
      overflow: hidden; //添加代码 auto也可以
    }
    .son-float{
      width: 100px;
      height: 100px;
      background-color: #ccc;
      float: left;
    }
  </style>
  <body>
    <div class="container">
      <div class="son-float">
      </div>
    </div>
  </body>

技术分享图片

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

.A{
    width: 100px;
    height: 100px;
    background-color: #ccc;
    float: left;
    }
    .B{
      width: 200px;
      height: 200px;
      background-color: #b5b5b5;
    }
  </style>
  <body>
    <div class="A">
      A我是一个设置了左浮动的元素
    </div>
    <div class="B">
      B我是A的兄弟元素，没有触发BFC元素，width:200px;height:200px;
    </div>
  </body>

技术分享图片

浮动元素脱离文档流，原来的空间释放，后来的兄弟元素B占用，

因此部分内容会被A覆盖，（但是文本内容不会被浮动元素覆盖）

可以触发B元素的BFC特性，给B元素添加overflow:hidden或者float:left；

技术分享图片

这个方法可以用来实现两列自适应布局，效果不错，这时候左边的宽度固定，右边的内容自适应宽度(去掉上面右边内容的宽度)。

　　（使用overflow:hidden的时候，可以实现左边宽度固定，右边自适应的效果，但是float:left无法都达到这种效果）

　　overflow:hidden；效果跟上图一样

  <style media="screen">
    .contain{
      width: 300px;
      height: 300px;
    }
    .A{
      width: 100px;
      height: 100px;
      background-color: #ccc;
      float: left;
    }
    .B{
      /* width: 200px;
      height: 200px; */
      background-color: #b5b5b5;
      overflow: hidden;
      /* float: right; */
    }
  </style>
  <body>
    <div class="contain">
      <div class="A">
        A我是一个设置了左浮动的元素
      </div>
      <div class="B">
        B我是A的兄弟元素，没有触发BFC元素，width:200px;height:200px;
      </div>
    </div>
  </body>