6.3.1 BFC 的定义。BFC 全称为 block formatting context，中文为“块级格式化上下文”。如果一个元素具有 BFC，内部子元素再怎么翻江倒海、翻云覆雨，都不会影响外部的元素。所以，BFC 元素是不可能发生 margin 重叠的，因为 margin重叠是会影响外面的元素的；BFC 元素也可以用来清除浮动的影响，因为如果不清除，子元素浮动则父元素高度塌陷，必然会影响后面元素布局和定位，这显然有违 BFC 元素的子元素不会影响外部元素的设定。
如何触发BFC：<html>根元素； float 的值不为 none； overflow 的值为 auto、scroll 或 hidden； display 的值为 table-cell、table-caption 和 inline-block 中的任何一个； position 的值不为 relative 和 static。
6.3.2 BFC 与流体布局。BFC 的结界特性最重要的用途其实不是去 margin 重叠或者是清除 float 影响，而是实现更健壮、更智能的自适应布局。和基于纯流体特性实现的两栏或多栏自适应布局相比，基于 BFC 特性的自适应布局有如下优点。
（1）自适应内容由于封闭而更健壮，容错性更强。比方说，内部设置 clear:both 不会与float 元素相互干扰而导致错位，
（2）自适应内容自动填满浮动以外区域，无须关心浮动元素宽度，可以整站大规模应用。
理论上，任何 BFC 元素和 float 元素相遇的时候，都可以实现自动填充的自适应布局。但是，由于绝大多数的触发 BFC 的属性自身有一些古怪的特性，所以，实际操作的时候，能兼顾流体特性和 BFC 特性来实现无敌自适应布局的属性并不多。
6.4.1 overflow 剪裁界线 border box。overflow 的剪裁或者滚动的边界是 border box 的内边缘，而非 padding box的内边缘，因此，忽略 padding-bottom 才是符合解析规则的渲染行为。所以我们在实际项目开发的时候，要尽量避免滚动容器设置 padding-bottom 值，除了样式表现不一致外，还会导致 scrollHeight 值不一样。
6.4.2 了解 overflow-x 和 overflow-y。overflow-x和 overflow-y，分别表示单独控制水平或垂直方向上的剪裁规则。支持的属性值和overflow 属性一模一样。如果 overflow-x 和 overflow-y 属性中的一个值设置为 visible 而另外一个设置为 scroll、auto 或 hidden，则 visible 的样式表现会如同 auto。也就是说，除非 overflow-x 和 overflow-y 的属性值都是 visible，否则 visible 会当成 auto 来解析。
6.4.3 overflow 与滚动条。HTML 中有两个标签是默认可以产生滚动条的，一个是根元素<html>，另一个是文本域<textarea>。之所以可以出现滚动条，是因为这两个标签默认的 overflow 属性值不是visible。在 PC 端，对<html>标签设置 overflow:hidden 可以隐藏滚动条禁止滚动，但是在移动端基本上无效。
6.4.4 依赖 overflow 的样式表现。有一种效果就离不开 overflow:hidden 声明，即单行文字溢出点点点效果。目前，对-webkit-私有前缀支持良好的浏览器还可以实现多行文字打点效果，但不依赖overflow:hidden
如何触发BFC：<html>根元素； float 的值不为 none； overflow 的值为 auto、scroll 或 hidden； display 的值为 table-cell、table-caption 和 inline-block 中的任何一个； position 的值不为 relative 和 static。
6.3.2 BFC 与流体布局。BFC 的结界特性最重要的用途其实不是去 margin 重叠或者是清除 float 影响，而是实现更健壮、更智能的自适应布局。和基于纯流体特性实现的两栏或多栏自适应布局相比，基于 BFC 特性的自适应布局有如下优点。
（1）自适应内容由于封闭而更健壮，容错性更强。比方说，内部设置 clear:both 不会与float 元素相互干扰而导致错位，
（2）自适应内容自动填满浮动以外区域，无须关心浮动元素宽度，可以整站大规模应用。
理论上，任何 BFC 元素和 float 元素相遇的时候，都可以实现自动填充的自适应布局。但是，由于绝大多数的触发 BFC 的属性自身有一些古怪的特性，所以，实际操作的时候，能兼顾流体特性和 BFC 特性来实现无敌自适应布局的属性并不多。
6.4.1 overflow 剪裁界线 border box。overflow 的剪裁或者滚动的边界是 border box 的内边缘，而非 padding box的内边缘，因此，忽略 padding-bottom 才是符合解析规则的渲染行为。所以我们在实际项目开发的时候，要尽量避免滚动容器设置 padding-bottom 值，除了样式表现不一致外，还会导致 scrollHeight 值不一样。
6.4.2 了解 overflow-x 和 overflow-y。overflow-x和 overflow-y，分别表示单独控制水平或垂直方向上的剪裁规则。支持的属性值和overflow 属性一模一样。如果 overflow-x 和 overflow-y 属性中的一个值设置为 visible 而另外一个设置为 scroll、auto 或 hidden，则 visible 的样式表现会如同 auto。也就是说，除非 overflow-x 和 overflow-y 的属性值都是 visible，否则 visible 会当成 auto 来解析。
6.4.3 overflow 与滚动条。HTML 中有两个标签是默认可以产生滚动条的，一个是根元素<html>，另一个是文本域<textarea>。之所以可以出现滚动条，是因为这两个标签默认的 overflow 属性值不是visible。在 PC 端，对<html>标签设置 overflow:hidden 可以隐藏滚动条禁止滚动，但是在移动端基本上无效。
6.4.4 依赖 overflow 的样式表现。有一种效果就离不开 overflow:hidden 声明，即单行文字溢出点点点效果。目前，对-webkit-私有前缀支持良好的浏览器还可以实现多行文字打点效果，但不依赖overflow:hidden
