一、BFC
1．定义：块级格式化上下文
2．如果一个元素具有 BFC，内部子元素怎么变化，都不会影响外部的元素
（1）不会发生margin重叠
（2）可以清除浮动影响，子元素浮动则父元素塌陷，影响后续布局，与BFC相悖
3．触发BFC
（1）<html>根元素；
（2）float 的值不为 none；
（3）overflow 的值为 auto、scroll 或 hidden；
（4）display 的值为 table-cell、table-caption 和 inline-block 中的任何一个；
（5）position 的值不为 relative 和 static
4．BFC与流体布局
（1）会自动填满容器中除了浮动元素以外的剩余空间，形成自适应布局效果
（2）浮动元素可以设置 margin-right 成透明 border-right 或 padding-right；又或者右侧BFC元素设置成透明 border-left 或者padding-left
（3）注意，BFC元素设置margin-left的话。则其值必须是浮动元素的宽度加间隙的大小，就变成动态不可控的了
（4）自适应内容由于封闭而更健壮，容错性更强。比方说，内部设置clear:both不会与float元素相互干扰而导致错位
（5）自适应内容自动填满浮动以外区域，无须关心浮动元素宽度
5．实际操作的时候，能兼顾流体特性和BFC特性来实现无敌自适应布局的属性并不多，常用overflow:hidden，不会影响元素原先的流体特性或宽度表现
二、overflow
1．overflow 剪裁界线 border box
（1）同时存在border和padding的时候，overflow裁剪为border box的边缘
（2）Chrome 浏览器下，如果容器可滚动（假设是垂直滚动），则 padding-bottom 也算在滚动尺寸之内，IE 和 Firefox 浏览器忽略 padding-bottom。在实际项目开发的时候，要尽量避免滚动容器设置 padding-bottom 值，除了样式表现不一致外，还会导致 scrollHeight 值不一样
2．IE8以上，加入了overflow-x，overflow-y
（1）支持属性：
• visible：默认值。
• hidden：剪裁。
• scroll：滚动条区域一直在。
• auto：不足以滚动时没有滚动条，可以滚动时滚动条出现。
（2）除非overflow-x和overflow-y的属性值都是visible，否则visible会当成auto来解析。永远不可能实现一个方向的裁剪或滚动的同时，另一个方向溢出
3．overflow与滚动条
（1）HTML 中有两个标签是默认可以产生滚动条的，一个是根元素<html>，另一个是文本域<textarea>，这两个标签默认overflow不为visible，IE8后都为默认auto
（2）在PC端，无论是什么浏览器，默认滚动条均来自<html>，而不是<body>标签
（3）滚动条会占用容器的可用宽度或高度，在移动端就不会有这样的问题，因为移动端的屏幕尺寸本身就有限，滚动条一般都是悬浮模式
（4）常用的解决方法有下面两种：一种是<table>元素使用固定的宽度值，但是距离右侧留17px的间隙，这样即使滚动条出现，也不会产生任何的宽度影响；另一种就是表格的最后一列不设定宽度（文字最好左对齐），前面每一列都定死宽度，这样最后一列就是自适应结构，就算滚动条出现，也只是自身有一些宽度变小，对整体对齐并无多大影响。
（5）滚动栏占据宽度的特性最大的问题就是页面加载的时候水平居中的布局可能会产生晃动，因为窗体默认是没有滚动条的，而 HTML 内容是自上而下加载的，就会发生一开始没有滚动条，后来突然出现滚动条的情况，此时页面的可用宽度发生变化，水平居中重新计算，导致页面发生晃动
（6）设置：overflow-y: scroll
4．文字溢出...效果
（1）text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
（2）对-webkit-私有前缀支持良好的浏览器还可以实现多行文字打点效果，但是却无须依赖 overflow:hidden
（3）只显示2行
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
1．定义：块级格式化上下文
2．如果一个元素具有 BFC，内部子元素怎么变化，都不会影响外部的元素
（1）不会发生margin重叠
（2）可以清除浮动影响，子元素浮动则父元素塌陷，影响后续布局，与BFC相悖
3．触发BFC
（1）<html>根元素；
（2）float 的值不为 none；
（3）overflow 的值为 auto、scroll 或 hidden；
（4）display 的值为 table-cell、table-caption 和 inline-block 中的任何一个；
（5）position 的值不为 relative 和 static
4．BFC与流体布局
（1）会自动填满容器中除了浮动元素以外的剩余空间，形成自适应布局效果
（2）浮动元素可以设置 margin-right 成透明 border-right 或 padding-right；又或者右侧BFC元素设置成透明 border-left 或者padding-left
（3）注意，BFC元素设置margin-left的话。则其值必须是浮动元素的宽度加间隙的大小，就变成动态不可控的了
（4）自适应内容由于封闭而更健壮，容错性更强。比方说，内部设置clear:both不会与float元素相互干扰而导致错位
（5）自适应内容自动填满浮动以外区域，无须关心浮动元素宽度
5．实际操作的时候，能兼顾流体特性和BFC特性来实现无敌自适应布局的属性并不多，常用overflow:hidden，不会影响元素原先的流体特性或宽度表现
二、overflow
1．overflow 剪裁界线 border box
（1）同时存在border和padding的时候，overflow裁剪为border box的边缘
（2）Chrome 浏览器下，如果容器可滚动（假设是垂直滚动），则 padding-bottom 也算在滚动尺寸之内，IE 和 Firefox 浏览器忽略 padding-bottom。在实际项目开发的时候，要尽量避免滚动容器设置 padding-bottom 值，除了样式表现不一致外，还会导致 scrollHeight 值不一样
2．IE8以上，加入了overflow-x，overflow-y
（1）支持属性：
• visible：默认值。
• hidden：剪裁。
• scroll：滚动条区域一直在。
• auto：不足以滚动时没有滚动条，可以滚动时滚动条出现。
（2）除非overflow-x和overflow-y的属性值都是visible，否则visible会当成auto来解析。永远不可能实现一个方向的裁剪或滚动的同时，另一个方向溢出
3．overflow与滚动条
（1）HTML 中有两个标签是默认可以产生滚动条的，一个是根元素<html>，另一个是文本域<textarea>，这两个标签默认overflow不为visible，IE8后都为默认auto
（2）在PC端，无论是什么浏览器，默认滚动条均来自<html>，而不是<body>标签
（3）滚动条会占用容器的可用宽度或高度，在移动端就不会有这样的问题，因为移动端的屏幕尺寸本身就有限，滚动条一般都是悬浮模式
（4）常用的解决方法有下面两种：一种是<table>元素使用固定的宽度值，但是距离右侧留17px的间隙，这样即使滚动条出现，也不会产生任何的宽度影响；另一种就是表格的最后一列不设定宽度（文字最好左对齐），前面每一列都定死宽度，这样最后一列就是自适应结构，就算滚动条出现，也只是自身有一些宽度变小，对整体对齐并无多大影响。
（5）滚动栏占据宽度的特性最大的问题就是页面加载的时候水平居中的布局可能会产生晃动，因为窗体默认是没有滚动条的，而 HTML 内容是自上而下加载的，就会发生一开始没有滚动条，后来突然出现滚动条的情况，此时页面的可用宽度发生变化，水平居中重新计算，导致页面发生晃动
（6）设置：overflow-y: scroll
4．文字溢出...效果
（1）text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
（2）对-webkit-私有前缀支持良好的浏览器还可以实现多行文字打点效果，但是却无须依赖 overflow:hidden
（3）只显示2行
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
