前端布局之BFC的理解与练习

什么是BFC？

在网上找了几篇文章读了一下，但对于什么是BFC还是半知不解。以下就是简单总结一下。

常见的定位方案

在说BFC之前，要先说说以下几种常见的定位方案。

普通流(normal flow)

在普通流中，元素按照其在 HTML 中的先后位置至上而下，从左而右布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。

浮动(float)

在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。

绝对定位 (absolute positioning)

在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。

BFC概念

MDN：

一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布
局出现的区域，也是浮动层元素进行交互的区域。
一个块格式化上下文由以下之一创建：

根元素或其它包含它的元素
浮动元素 (元素的 float 不是 none)
绝对定位元素 (元素具有 position 为 absolute 或 fixed)
内联块 (元素具有 display: inline-block)
表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
具有overflow 且值不是 visible 的块元素，
display: flow-root
column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹
在一个多列容器中。
一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的
元素。

块格式化上下文对于定位 (参见 float) 与清除浮动 (参见 clear) 很重要。定位和清除浮动的样式规则只适
用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清
除同一块格式化上下文中在它前面的元素的浮动。

简单的说，概念就不是人看的东西。
我只需要在我看到的时候明白这个是BFC就行。
所以下面说说BFC的特性。

BFC的特性

1. 使 BFC 内部浮动元素不会到处乱跑；
2. 和浮动元素产生边界。

使BFC内部的浮动元素不会乱跑

	<div class="out">
        <div class="in">

        </div>
    </div>

		.out{
            border: 10px solid red;
            min-height: 20px;
        }
        .in{
            background-color: grey;
            height: 100px;
            width: 100px;
        }

效果如下：

默认情况下，内部元素会撑开父级元素的宽高。
当我给子元素添加float或者绝对定位后，则会变成下面这个效果。

子元素添加浮动或者绝对定位会脱离普通文档流，所以就不能撑起父级元素的宽高。
此时如果我还想让父级元素包裹住子级浮动元素可以这么做：
让父级元素产生一个BFC（MDN文档里面的方法）

效果如下

这就是 BFC 的第一个作用：使 BFC 内部的浮动元素不会到处乱跑。

和浮动元素产生边界

通常，一个普通流盒子和一个脱离文档流的盒子如果想要设置一个外边距，我们需要将外边距的数值设为需要的margin值加上脱离文档流的盒子的宽度，这样做未免太low。

我们可以让普通流盒子产生一个BFC，这样它与浮动盒子的外边距就可以正常设置了。
代码如下：

    <div class="left">

    </div>
    <div class="right">

    </div>
    
    .left,.right{
        border: 3px solid red;
        height: 100px;
    }
.	left{
        min-width: 100px;
        margin-right: 20px;
        float: left;
    }
    .right{
        border-color: blue;
        display: flow-root;
    }

效果如下

BFC解决外边距合并问题

我们在写页面的时候经常会遇到外边距的情况，BFC的特性可以解决这个问题。
下面我们来对比一下：
先写出来正常的外边距合并的两个盒子

<div class="div1"></div>
<div class="div2"></div>

        *{
            margin: 0;
            padding: 0;
        }
	    .div1{
            height: 100px;
            background-color: #eee;
            margin: 50px;
        }

        .div2{
            height: 100px;
            background-color: blue;
            margin: 50px;
        }

效果如下

接下来，把两个盒子分别放入不同的BFC容器中，
在div1和div2的外面都添加一个类名为container的盒子，
然后让外面的两个盒子产生BFC特性
代码如下：

	   *{
            margin: 0;
            padding: 0;
        }
        .container{
            overflow: hidden; 
        }
        .div1{
            height: 100px;
            background-color: #eee;
            margin: 50px;
        }

        .div2{
            height: 100px;
            background-color: blue;
            margin: 50px;
        }

效果如下：

嘿嘿，外边距合并不见了。