1.box(盒子)

页面的基本构成元素，分为inline，block，inline-block三种类型的box.

2.FC(Formatting Context)

Formatting Context是W3C规范中的一种概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

常见得Formatting Context有Block formatting context（简称BFC）和inline formatting context（简称IFC）.

3.BFC的定义

Block formatting context 直译为块级格式化上下文。是一个独立的渲染区域，只有Block-level box参与，它规定了内部的block-level box如何布局，且与这个区域的外部毫不相干。

4.BFC布局规则

内部的box会在垂直方向，一个接一个地放置

box垂直方向的距离由margin决定。属于同一个BFC的两个相邻box的margin会发生重叠

每个元素的margin box的左边，与包含块border box 的左边相接触，即使存在浮动也如此

BFC的区域不会与float元素重叠（一般用来清除浮动）

BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

计算BFC的高度时，浮动元素也参与计算

BFC布局规则示例

1.内部的box会在垂直方向，一个接一个地放置：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wapper{
            border:2px solid orange;
        }
        .box1{
           width:200px;
           height:150px;
           background-color: red;
        }
        .box2{
           width:200px;
           height:350px;
           background-color: green;
        }
    </style>
</head>
<body>
    <div class="wapper">
       <div class="box1">box1</div>
       <div class="box2">box2</div> 
    </div>
</body>
</html>

2.box垂直方向的距离由margin决定。属于同一个BFC的两个相邻box的margin会发生重叠

tips（margin塌陷与合并）：

1.父与子之间：子级上下margin会与父级上下margin重叠，以最大值为标准去渲染

2.兄弟元素之间：兄弟的上下边距取最大值

3.空元素：如果设置了margin-top和margin-bottom，会在这两之间取最大值作为最终边距值

关于margin塌陷和合并的问题可以通过触发父盒子bfc来解决

3.每个元素的margin box的左边，与包含块border box 的左边相接触，即使存在浮动也如此

第三条：子盒子margin和父盒子边框相接触

        .wapper{
            border:2px solid orange;
        }
        .box1{
           width:200px;
           height:150px;
           background-color: red;
           //下边距
           margin-bottom: 30px;
        }
        .box2{
           width:200px;
           height:350px;
           background-color: green;
           //上边距
           margin-top: 100px;
        }

4.BFC的区域不会与float元素重叠

5.BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

该做法同时也是两栏布局的做法之一：左侧浮动，右侧自适应

        .wapper{
            border:2px solid orange;
        }
        .box1{
           width:200px;
           height:150px;
           background-color: red;
           //这里浮动了，box2就会占据box1的位置
           float: left;
        }
        .box2{
           //这里添加overflow:hidden使该盒子形成bfc区域
           overflow: hidden;
           width:300px;
           height:150px;
           background-color: green;
          
        }

6.计算BFC的高度时，浮动元素也参与计算

        .wapper{
            //没有设置高度，又加上浮动脱标，所以高度塌陷，此时计算该盒子的高度应将它里面的子盒子的 
              高度计算在其中
            border:2px solid orange;
           //在这里面使用overflow可以清楚浮动，实际上就是利用了bfc可以包裹住浮动元素这一点
        }
        .box1{
           width:200px;
           height:150px;
           background-color: red;
           //浮动
           float: left;
        }
        .box2{
           //浮动
           float: left;
           width:300px;
           height:150px;
           background-color: green;
        }

5.如何创建BFC

overflow不为visible时

float不为none时

position不为static或不为relative时

display为inline-block，table-cell，table，table-caption时

display:flow-root 这个属性就是单纯为创建bfc提供的，但有兼容问题

总结BFC可以解决的问题

包裹浮动元素（解决浮动元素的父盒子塌陷问题）

解决margin塌陷和合并

提供多栏布局的一种做法

【面试】BFC(块级格式化上下文)