请描述 BFC(Block Formatting Context) 及其如何工作？

1.背景介绍

box,Formatting Context基本概念

先了解下box和Formatting Context：

Box 是 CSS 布局的对象和基本单位，直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。不同类型的 Box，会参与不同的Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子：

block-level box

display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；

inline-level box

display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；

Formatting context

Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。CSS2.1中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFC。

常见定位方案

在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案:

一普通流 (normal flow)

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

二浮动 (float)

在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移

三绝对定位 (absolute)

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

2.知识剖析

BFC 概念

BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，它是一个独立的渲染区域，只有block-levelbox参与，规定了内部block-level-box如何布局，并且 BFC 具有普通容器所没有的一些特性。你可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素不会影响到外部。

BFC布局规则

我们平常说的盒子是由margin、border、padding、content组成的,实际上每种类型的四条边定义了一个盒子,分别是 content box、padding box、border box、margin box ,这四种类型的盒子一直存在,即使他们的值为0.决定块盒在包含块中与相邻块盒的垂直间距的便是margin-box。

box1 { box-sizing: content-box; } /* 默认值 */

box2 { box-sizing: padding-box; } /* FireFox曾经支持 */（padding-box在background-clip, background-origin等有用到）

box3 { box-sizing: border-box; } /* 全线支持 */（就是我们用的怪异盒模型，）

box4 { box-sizing: margin-box; } /* 从未支持过 */(没什么价值，没什么使用需求)

•内部的Box会在垂直方向，一个接一个地放置。就是我们平常div一行一行块级放置的样式。

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

•每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。就是元素左margin和包含块左border接触，即使存在浮动也是如此。左浮动就是靠左，右浮动就是靠右，

• BFC的区域不会与float box重叠。应用于两列布局

• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。上下margin不影响，浮动不覆盖，

•计算BFC的高度时，浮动元素也参与计算。如父元素高度塌陷，清除浮动。父元素高度由内部撑开，计算bfc高度，内部浮动的子元素也参加。

如何触发BFC

只要元素满足下面任一条件即可触发 BFC 特性：

1.body 根元素

2.浮动元素：float 除 none 以外的值

3.绝对定位元素：position (absolute、fixed)

4.display 为 inline-block、table-cells、flex

5.overflow 除了 visible 以外的值 (hidden、auto、scroll)

3.常见问题

1. 同一个 BFC 下上下外边距会发生重叠
2. 元素浮动后父元素高度塌陷

3. 元素被浮动元素覆盖

4.解决方案

1. 如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。
2. 父元素触发BFC，清除浮动，高度由内容撑开自适应，不存在结构和语义化问题，代码量极少，当然内容增多时候容易成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素，可以用别的清除浮动方法如伪元素
3. 第二个元素触发BFC，可用于左列定宽，右列自适应的俩列布局

5.编码实战

<body>
 <!-- 问题1 -->
 <span>一 边距重叠</span>
 <p class="one">下边距50px</p>
 <div class="bfc">
 <p class="one">上边距50px</p>
 </div>
 <!-- 问题2 -->
 <span>二 清除浮动</span>
 <div class="father">
 我是父容器
 <div class="two">我浮动啦</div>
 <div class="two">我也浮动啦</div>
 </div>

 <!-- 问题3 -->
 <span>三 两列布局</span>
 <div>
 <div class="img">我浮动了</div>
 <p class="right">噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。
 问君西游何时还？畏途巉岩不可攀。但见悲鸟号古木，雄飞雌从绕林间。又闻子规啼夜月，愁空山。蜀道之难，难于上青天，使人听此凋朱颜！连峰去天不盈尺，枯松倒挂倚绝壁。飞湍瀑流争喧豗，砯崖转石万壑雷。其险也如此，嗟尔远道之人胡为乎来哉！
 剑阁峥嵘而崔嵬，一夫当关，万夫莫开。所守或匪亲，化为狼与豺。朝避猛虎，夕避长蛇；磨牙吮血，杀人如麻。锦城虽云乐，不如早还家。蜀道之难，难于上青天，侧身西望长咨嗟！
 </p>
 </div>
 <p>因此，BFC外部存在浮动时，该浮动元素不会影响BFC内部布局,即BFC不会与float box重叠，文字始终右列自适应布局，倘若图片变宽，文字会通过变窄，但是不会和浮动元素重叠</p>
</body>

body {
 background: #ccc;
}


p {
 font-size: 30px;
}


span {
 display: block;
 margin-left: 40%;
 margin-bottom: 50px;
 font-size: 40px;
 font-weight: bold;
 color: #f71010;
}


div {
 font-size: 30px;
}


.bfc {
 overflow: hidden;
}

/* 1 */


.one {
 width: 200px;
 height: 100px;
 background: #68cdd5;
 margin: 50px;
}

/* 2 */


.father {
 background: #e70f0f;
 border: 5px solid #3802fa;
 margin-bottom: 250px;
}


.two {
 float: left;
 margin: 10px;
 width: 100px;
 height: 100px;
 background: #1af106;
}

/* 3 */


.img {
 float: left;
 width: 300px;
 height: 500px;
 margin: 20px;
 background-image: url(https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike150%2C5%2C5%2C150%2C50/sign=c984d09b18d5ad6ebef46cb8e0a252be/78310a55b319ebc4acda9dc68126cffc1f1716ca.jpg);
 background-size: cover;
 background-repeat: no-repeat;
}


.right {
 background: #68cdd5;
}

可以把上面或下面的盒子放在一个bfc父容器里解决边距重叠

浮动导致高度塌陷，可以触发父容器的bfc，比如overflow：hidden，清除浮动

请描述 BFC(Block Formatting Context) 及其如何工作

因为图片浮动导致图片覆盖了文本，因为文字不会被覆盖所以出现文本环绕，可以触发文字容器的bfc实现左列定宽右列自适应

6.扩展思考

为什么用overflow触发而不用其他的？

因为其他如float,positon等等会影响布局,达不到我们想要的效果

7.参考文献

（转）前端精选文摘：BFC神奇背后的原理

（转）CSS深入理解流体特性和BFC特性下多栏自适应布局

8.更多讨论

问：overflow的auto还是visible可以触发bfc?

答：auto，hidden，scroll可以触发

问：auto和scroll有何区别？

答：scroll选择该选项，则层内容无论是否超出层的范围，都会自动增加滚动条。

auto(自动): 选择该选项，，当层内容超出层的范围时，自动增加滚动条(默认)

问：利用浮动再触发bfc用来干嘛？

答：用来实现左列定宽，右列自适应布局