第 39 题：介绍下 BFC 及其应用

[webproblem]

BFC 就是块级格式上下文，是页面盒模型布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。创建 BFC 的方式有：

1. html 根元素
2. float 浮动
3. 绝对定位
4. overflow 不为 visiable
5. display 为表格布局或者弹性布局

BFC 主要的作用是：

1. 清除浮动
2. 防止同一 BFC 容器中的相邻元素间的外边距重叠问题

[Ray-56]

10 分钟理解 BFC 原理

[hengliyin]

什么情况下会生成 BFC

[JayZangwill]

补充一下 @webproblem 童鞋的回答吧：
BFC特性：

1. 内部box会在垂直方向，一个接一个地放置。
2. Box垂直方向的距离由margin决定，在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。
3. 在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）
4. 形成了BFC的区域不会与float box重叠
5. 计算BFC高度时，浮动元素也参与计算

生成BFC除了 @webproblem 童鞋所说的还有：行内块元素、网格布局、contain值为layout、content或 strict的元素等。
更多生成BFC的方法：传送门

BFC作用：

1. 利用特性4可实现左图右文之类的效果：

<img src='image.png'>
<p>我是超长的文字<p>

img {
    float:left
}
p {
    overflow:hidden
}

2. 利用特性5可以解决浮动元素造成的父元素高度塌陷问题：

<div class='parent'>
    <div class='float'>浮动元素</div>
</div>

.parent {
    overflow:hidden;
}
.float {
    float:left;
}

[alianggu]

块状格式化上下文BFC

[fireairforce]

BFC：
BFC元素的垂直方向上会发生边距重叠。
BFC元素和浮动元素不会发生重叠。
BFC在计算高度时会把浮动元素计算进去。
BFC在页面是个独立的容器，里外元素互不影响。

[louzhedong]

BFC原理解析

[houmao]

BFC：
BFC元素的垂直方向上会发生边距重叠。
BFC元素和浮动元素不会发生重叠。
BFC在计算高度时会把浮动元素计算进去。
BFC在页面是个独立的容器，里外元素互不影响。

第一条不准确，应该是BFC内的两个相邻块级元素垂直方向发生边距重叠

[wlf1112]

BFC及其原理解析

[Shiryan]

块格式化上下文

[MillerDix]

有一个怪怪的点：在body元素上增加 overflow: hidden; 由于overflow的扩散行为将导致body不会生成BFC。使用其他方法是正常的

[PercyMo]

10 分钟理解 BFC 原理

这篇文章感觉描述不是很准确，关于BFC属于文档流的这部分，个人不是很认同。