1.BFC 的定义：BFC 全称为 block formatting context，中文为“块级格式化上下文”。相对应的还有 IFC，也就是 inline formatting context，中文为“内联格式化上下”。
如果一个元素具有 BFC，内部子元素不会影响外部的元素。
BFC 元素是不可能发生 margin 重叠的，因为 margin重叠是会影响外面的元素的
BFC 元素也可以用来清除浮动的影响，因为如果不清除，子元素浮动则父元素高度塌陷，必然会影响后面元素布局和定位。
触发 BFC条件：
• <html>根元素；
• float 的值不为 none；
• overflow 的值为 auto、scroll 或 hidden；
• display 的值为 table-cell、table-caption 和 inline-block 中的任何一个；
• position 的值不为 relative 和 static。
2.BFC 与流体布局
（1）自适应内容由于封闭而更健壮，容错性更强。
（2）自适应内容自动填满浮动以外区域，无须关心浮动元素宽度，可以整站大规模应用。
3.能兼顾流体特性和 BFC 特性来实现无敌自适应布局的属性
（1）float:left。浮动元素本身 BFC 化，然而浮动元素有破坏性和包裹性，失去了元素本身的流体自适应性，因此，无法用来实现自动填满容器的自适应布局
（2）position:absolute。
（3）overflow:hidden。
（4）display:inline-block。
（5）display:table-cell。
（6）display:table-row。
（7）display:table-caption。
4.两套 IE7 及以上版本浏览器适配的自适应解决方案。
（1）借助 overflow 属性，如下：.lbf-content { overflow: hidden; }
（2）融合 display:table-cell 和 display:inline-bloc
5.overflow 属性原本的作用指定了块容器元素的内容溢出时是否需要裁剪
6.overflow 剪裁界线 border box ：当子元素内容超出容器宽度高度限制的时候，剪裁的边界是 border box 的内边缘，而非 padding box 的内边缘。
7.了解 overflow-x 和 overflow-y
overflow 属性家族增加了两个属性，就是这里的overflow-x和 overflow-y，分别表示单独控制水平或垂直方向上的剪裁规则。支持的属性值和 overflow 属性一模一样。
• visible：默认值。
• hidden：剪裁。
• scroll：滚动条区域一直在。
• auto：不足以滚动时没有滚动条，可以滚动时滚动条出现。
scroll、auto 和 hidden 这 3 个属性值是可以共存的。
8. overflow 与滚动条
HTML 中有两个标签是默认可以产生滚动条的，一个是根元素<html>，另一个是文本域<textarea>。之所以可以出现滚动条，是因为这两个标签默认的 overflow 属性值不是visible
（1）在 PC 端，无论是什么浏览器，默认滚动条均来自<html>，而不是<body>标签。
（2）滚动条会占用容器的可用宽度或高度。
9.依赖 overflow 的样式表现
在 CSS 世界中，很多属性要想生效都必须要有其他 CSS 属性配合，其中有一种效果就离不开 overflow:hidden 声明，即单行文字溢出点点点效果。
.ell { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } 这 3 个声明缺一不可。
.ell-rows-2 { display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp: 2;}
如果一个元素具有 BFC，内部子元素不会影响外部的元素。
BFC 元素是不可能发生 margin 重叠的，因为 margin重叠是会影响外面的元素的
BFC 元素也可以用来清除浮动的影响，因为如果不清除，子元素浮动则父元素高度塌陷，必然会影响后面元素布局和定位。
触发 BFC条件：
• <html>根元素；
• float 的值不为 none；
• overflow 的值为 auto、scroll 或 hidden；
• display 的值为 table-cell、table-caption 和 inline-block 中的任何一个；
• position 的值不为 relative 和 static。
2.BFC 与流体布局
（1）自适应内容由于封闭而更健壮，容错性更强。
（2）自适应内容自动填满浮动以外区域，无须关心浮动元素宽度，可以整站大规模应用。
3.能兼顾流体特性和 BFC 特性来实现无敌自适应布局的属性
（1）float:left。浮动元素本身 BFC 化，然而浮动元素有破坏性和包裹性，失去了元素本身的流体自适应性，因此，无法用来实现自动填满容器的自适应布局
（2）position:absolute。
（3）overflow:hidden。
（4）display:inline-block。
（5）display:table-cell。
（6）display:table-row。
（7）display:table-caption。
4.两套 IE7 及以上版本浏览器适配的自适应解决方案。
（1）借助 overflow 属性，如下：.lbf-content { overflow: hidden; }
（2）融合 display:table-cell 和 display:inline-bloc
5.overflow 属性原本的作用指定了块容器元素的内容溢出时是否需要裁剪
6.overflow 剪裁界线 border box ：当子元素内容超出容器宽度高度限制的时候，剪裁的边界是 border box 的内边缘，而非 padding box 的内边缘。
7.了解 overflow-x 和 overflow-y
overflow 属性家族增加了两个属性，就是这里的overflow-x和 overflow-y，分别表示单独控制水平或垂直方向上的剪裁规则。支持的属性值和 overflow 属性一模一样。
• visible：默认值。
• hidden：剪裁。
• scroll：滚动条区域一直在。
• auto：不足以滚动时没有滚动条，可以滚动时滚动条出现。
scroll、auto 和 hidden 这 3 个属性值是可以共存的。
8. overflow 与滚动条
HTML 中有两个标签是默认可以产生滚动条的，一个是根元素<html>，另一个是文本域<textarea>。之所以可以出现滚动条，是因为这两个标签默认的 overflow 属性值不是visible
（1）在 PC 端，无论是什么浏览器，默认滚动条均来自<html>，而不是<body>标签。
（2）滚动条会占用容器的可用宽度或高度。
9.依赖 overflow 的样式表现
在 CSS 世界中，很多属性要想生效都必须要有其他 CSS 属性配合，其中有一种效果就离不开 overflow:hidden 声明，即单行文字溢出点点点效果。
.ell { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } 这 3 个声明缺一不可。
.ell-rows-2 { display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp: 2;}
