BFC以及利用BFC实现自适应两栏布局和双飞翼布局

什么是BFC？

BFC 即 Block Formatting Contexts (块级格式化上下文)，通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

BFC的触发条件？

1. 根元素 html默认就是一个BFC
2. float的值不为none 单纯的div不是BFC，如果添加了浮动就是BFC
3. overflow的值不为visible 单纯的div不是BFC，如果添加了overflow：hidden等就是BFC
4. display的值为 inline-block/ table-cell/ table-caption/ flex/
   inline-flex position的值为absolute或fixed

BFC的特性和应用？

1. Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠（应用：防止marin重叠）
2. BFC的区域不会与float box发生重叠（应用：自适应两栏布局）
3. 计算BFC的高度时，浮动元素也参与计算（应用：清除内部浮动）
4. BFC内部的Box会在垂直方向，一个接一个的放置。
5. 每个元素的margin box的左边会与包含块border box的左边相接触（对于从左到右的格式化，否则相反），即使存在浮动也会如此。
6. BFC就是页面上的一个独立容器，容器里面的元素不会影响到外面的元素

自适应两栏布局

两种方式
第一种：给右边的加overflow:hidden触发BFC
看具体实现代码：

<!--body部分，设置两个div-->
<div class="wrap1"></div>
<div class="wrap2"></div>

<!--css部分设置样式-->
		html,body{
           height: 100%;
      	 }
        .wrap1{
            width: 500px;
            height: 300px;
            background-color: greenyellow;
            float: left;<!--给左边div设置左浮动-->
        }
        .wrap2{
            height: 100%;
            background-color: hotpink;
            overflow:hidden;<!--给you边div设置左浮动-->

实现效果如下图：

第二种：给右边加子元素，设置margin-left

具体实现代码：

<!--body部分，设置三个div-->
<div class="wrap1"></div>
<div class="wrap2">
     <div class="son"></div>
</div>

<!--css部分设置样式-->
		html,body{
           height: 100%;
       }
        .wrap1{
            width: 500px;
            height: 300px;
            background-color: greenyellow;
            float: left;
        }
        .wrap2{
            height: 100%;
            background-color: hotpink;
            /* overflow: hidden; */
        }
        .son{
            height: 100%;
            margin-left: 500px;
            background-color: khaki;
        }

效果图如下：

双飞翼布局

也有两种方式，和两栏布局实现方式相似。
第一种：给中间的加overflow:hidden触发BFC
具体实现代码：

<!--body部分，设置三个div-->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

<!--css部分设置-->
		 html,body{
            height: 100%;
        }
        .box1,.box2{
            width: 300px;
            height: 100%;
            background-color: lightblue;
        }
        .box1{
            float: left;
        }
        .box2{
            float: right;
        }
        .box3{
            height: 100%;
            background-color: mistyrose;
            overflow: hidden;
        }

效果图如下：

第二种：给中间的加一个子元素，给子元素设置左右边距
具体代码实现：

<!--body部分，设置三个div，在第三个div中加一个子div-->
<div class="box1"></div>
    <div class="box2"></div>
    <div class="box3">
        <div class="son"></div>
    </div>

<!--css部分-->
html,body{
            height: 100%;
        }
        .box1,.box2{
            width: 300px;
            height: 100%;
            background-color: lightblue;
        }
        .box1{
            float: left;
        }
        .box2{
            float: right;
        }
        .box3{
            height: 100%;
            background-color: mistyrose;
        }
        .son{
            height: 100%;
            margin: 0 300px;
            background-color: orchid;
        }

效果图如下：