BFC浅析 - 爱码网

BFC到底使什么？

BFC概括：可以在心中记住这么一个概念———所谓的BFC就是css布局的一个概念，是一块区域，一个环境。

BFC布局规则

关于这些不同 box，下文会解释，别慌~

内部的Box（Block-level box）会在垂直方向，一个接一个地放置。
内部的Box（Block-level box）垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box（Block-level box）的margin会发生重叠
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算

哪些元素会生成BFC?

根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible

BFC的定义

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与（在下面有解释），它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干

什么是块级盒 Block-level box

块级盒block-level box是这种参与了块级排版上下文（BFC）的一种盒子，每个块级元素都生成了一个包含后代盒子和生成的内容的主要块级盒，并且这个盒子参与了任何定位的计算。块级元素会自动生成一个块级盒block-level box，这是块级盒block-level-box的盒模型构成，它表明的是块级盒自身的结构构成
BFC浅析

margin、border、padding、content分别定义了元素四种边，然后每种类型的边的四条边定义了一个盒子，分别是content box、padding box、border box、margin box，而决定块盒在包含块中与相邻块盒的垂直间距的便是margin-box，这个margin-box是始终存在的，即使它的margin为0。
margin-box是参与块级盒在上下文中的布局（在BFC里面）的，但是参与BFC布局（很多BFC环境组成）的盒子却是块级盒block-level box，并且还有一点需要明确的是参与布局的是盒子而不是元素本身。

什么是包含块 containing block

元素盒子的位置和尺寸往往是根据一个矩形计算出来的，我们称这个矩形为元素的包含块，如果这个元素的position值是relative或static，这个元素的包含块是由离其最近的块级的祖先盒子的内容的边content-edge构成的。就是离其最近的块级祖先盒子的content-box。

BFC的作用

BFC作用就是其定义和其布局规则所造成的

解决margin重叠

首先想一想为什么会重叠？
因为，根据布局规则第2条，块级盒(Block-level box)它们在同一BFC下呀。
怎么解决？
自然是让块级盒不在同一BFC下不就行了！
html

<div class="container">   //不在同一BFC下
        <div class="div1"></div>
    </div>
<div class="div2"></div>

css

.container {
        border:1px solid black;
    }
    .div1 {
        background-color: aqua;
        width: 100px;
        height: 100px;
        margin-bottom: 10px;  //*
    }

    .div2 {
        background-color: red;
        width: 100px;
        height: 100px;
        margin-top: 10px; //*
    }

清除内部浮动

为什么可以清除浮动呢？还是因为BFC的布局规则6——计算BFC的高度时，浮动元素也参与计算。
浮动不是会引起高度坍塌吗？那是因为float会脱离正常的文档流。包含它的元素计算高度时就不会带上它。
那形成一个BFC，计算高度时又会带上它了。这也是

    .container {
        border:1px solid black;
        overflow: hidden;   //生成BFC环境
    }
    .div1 {
        background-color: aqua;
        width: 100px;
        height: 100px;
        float: left;
    }
 <div class="container">
        <div class="div1"></div>
 </div>

参考：
http://web.jobbole.com/84808/
https://juejin.im/post/5909db2fda2f60005d2093db