BFC学习札记

关于题目：BFC学习札记

BFC：Block Formatting Context.

札记：读书时摘记的要点和心得体会，或见闻记录。汇集多篇成书，也可称“札记”。

说实话，学前端技术，笔者是半路出身，也不曾重视基础，最近发现一个蹊跷的问题后，仔细研习了一番，还在网上请教了一位有经验的前端前辈。才发现，搞不好基础，很多问题只能停留在表面，无法真正理解并且解决问题。

什么是BFC

BFC就是一种布局方式，在这种布局方式下，盒子们自所在的 containing block 顶部起一个接一个垂直排列，水平方向上撑满整个宽度 (除非内部的盒子自己内部建立了新的 BFC)。 developer center上面有对BFC的一段描述：

A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other.
一个 block formatting context 是web页面可视化CSS渲染的一个部分，是一块 block boxes 排布以及 float 元素相互作用的区域。

可以理解为一个作用范围，在一个BFC里的布局与其之外的布局不相关或者说不相互影响。有一个形象的例子可作参考：

把一个页面想象成大的集装箱，这个集装箱里装的货物就是HTML元素。在现实生活中为了避免不同人的货物相互混淆，都是把货物打好包装再装入集装箱，这样的话无论你包装里面的货物怎么摆放，都不会影响到其他人的货物。那么这个包装就可以被想象成Block Formatting Context。

如何创建BFC

A block formatting context is a box that satisfies at least one of the following:

• the value of “float” is not “none”
• the used value of “overflow” is not “visible”
• the value of “display” is “table-cell”, “table-caption”, or “inline-block”
• the value of “position” is neither “static” nor “relative”

翻译一下就是：

当一个HTML元素满足下面条件的任何一点，都可以产生Block Formatting Context：

• float的值不为”none”
• overflow的值不为”visible”
• display的值为 “table-cell”, “table-caption”, or “inline-block”中的任何一个
• position的值不为 “static” 或 “relative”中的任何一个

这个还要添加一个，为根元素时

BFC应用实例

话说要融会贯通的话，搞懂理论后，能解决实际问题那就OK了。

一口吃不成胖子，下面每个例子都值得好好研究，近期将发表博文一个一个的研究。

1、BFC可以阻止垂直边距叠加问题

2、BFC可以包含内部元素的浮动

3、BFC可以阻止元素被浮动覆盖

4、BFC可以决定清除浮动的范围

参考资料：

白话Block Formatting Context

CSS定位机制之一：普通流

CSS 101: Block Formatting Contexts（BFC）（原文已挂掉，这里是转载的）

Block-level boxes、containing block、block formatting context 三者之间的区别和联系

关于Block Formatting Context（BFC)