BFC及应用学习总结

首先回顾一下普通流，普通流对后面进一步了解BFC有很大的做用

普通流（Normal Flow）

普通流是网页中元素的默认排版，默认状况下
块级元素：以block flow direction排列（每个块级元素新起一行，即以从上往下以列排列）
行内元素：不会另起一行，一个接一个排布，直到空间不足

脱离普通流

CSS有如下几种方法使元素脱离普通流

float

float可以使元素向某一方向偏移，直接看demo

<div style="background-color: pink; opacity: 0.5; height: 100px;width: 100px; float: left">
        粉色透明div向左float
    </div>
    <div style="background-color: lightblue; width: 400px; height: 400px;">
        <div style="background-color: yellow; width: 50px; height: 50px;">本该在黄色div中的文字
            环绕粉色div
        </div>
        普通流浅蓝色DIV，与粉色div为兄弟元素，且包含黄色子div
    </div>

为方便看出浮动元素脱离普通流遮盖效果，我给粉色div加了透明度，能够直接看出其覆盖了蓝色div中的黄色div，同时由于文字会环绕浮动div，故黄色div的文字置于了粉色div下方
（float的原本用处是为了实现文字环绕）

absolute与fixed

这两种状况相对浮动更易于理解，本身动手实验就好啦

display:none

会使dom节点不在渲染树中，再也不有分配空间

BFC

简介

先看下FC，即Formatting Context（格式化上下文），是W3C CSS2.1中的一个概念，指页面的一块渲染区域，有对应的渲染规则（BFC与IFC），决定子元素如何定位，及和其余元素之间的关系和相互影响

而BFC即Block Formatting Contexts，触发BFC特性的元素会有如下影响（我翻译水平较低，内容来自W3C BFC）：

1. 一个BFC下，block子元素会垂直排列，且垂直方向上会发生margin合并
2. BFC中的元素的左外边缘会touch到BFC容器的左边缘（右边同理，这个元素同时包括浮动元素）

结合上述两点，各个blog上有这样的总结：

BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。因此，避免margin穿透啊，清除浮动什么的也好理解了。（摘自张鑫旭blog https://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout）

什么状况下会触发BFC呢，主要有如下几种状况

• 根元素，即HTML标签
• 浮动元素：float值为left、right
• overflow值不为 visible，为 auto、scroll、hidden
• display值为 inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
• 定位元素：position值为 absolute、fixed

tips：
W3C文档对触发的更清晰描述：Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells
, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (
except when that value has been propagated to the viewport) establish new block formatting contexts for
 their contents.

应用

BFC有不少方面应用，了解BFC特色后，不少操做也知道原理了

避免margin合并(margin collapse)

同一个BFC下：

<div style="width: 100px;height: 100px;background-color: pink; margin: 20px;" > </div>
    <div style="width: 100px;height: 100px;background-color: pink; margin: 20px;" > </div>

可见margin发生合并

不一样BFC下：

<div style="overflow: hidden;">
        <div style="width: 100px;height: 100px;background-color: pink; margin: 20px;" > </div>
    </div>

    <div style="overflow: hidden;">
        <div style="width: 100px;height: 100px;background-color: pink; margin: 20px;" > </div>    
    </div>

margin不合并

包含浮动元素（清除浮动）

这只是清除浮动的一种方式而已，并且也有一些局限性，但作个例子说明BFC的应用
未清除浮动：

<div style="border: 1px solid black;">
        <div style="float: left;width: 100px;height: 100px;background-color: pink;" ></div>
    </div>

触发BFC清除浮动：

<div style="border: 1px solid black;overflow: hidden;">
        <div style="float: left;width: 100px;height: 100px;background-color: pink;" ></div>
    </div>

题外小声逼逼：使用浮动需谨慎

去除覆盖效果

<div style="background-color: pink; opacity: 0.5; height: 100px;width: 100px; float: left">
        粉色透明div向左float
    </div>
    <div style="background-color: lightblue; width: 400px; height: 400px;">
        普通流浅蓝色DIV，与粉色div为兄弟元素;普通流浅蓝色DIV，与粉色div为兄弟元素;普通流浅蓝色DIV，与
        粉色div为兄弟元素;普通流浅蓝色DIV，与粉色    div为兄弟元素;普通流浅蓝色DIV，与粉色div为兄弟元素;
        普通流浅蓝色DIV，与粉色div为兄弟元素;
    </div>

显示以下

浮动元素覆盖于div之上，同时文字环绕

可是触发浅蓝色的div以后

overflow: hidden;

此时文字信息为匿名块框,因此原理仍是BFC的第二个特色：BFC中的元素的左外边缘会touch到BFC容器的左边缘（右边同理，这个元素同时包括浮动元素），分离造成此效果

自适应布局

结合上述的去除覆盖效果与div默认的width:auto能够实现自适应布局，可是也有不少局限性，好比overflow:hidden不少场景不适合使用等等

小声逼逼：flex！

总结

知道原理可让人少犯某些页面的布局错误
内容有不妥之处请大佬指出
小声逼逼：float使用需谨慎！

参考资料

Normal Flow——MDN
CSS深刻理解流体特性和BFC特性下多栏自适应布局
W3C BFC
10 分钟理解 BFC 原理
CSS 匿名文本和匿名框