inlineblock、BFC、外边局合并、溢出

一、在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例

两个margin之间是否有界限，没有界限、浮动、overflow就会融合

消除相邻元素外边距合并原理是形成自己的fbc,不在同一个fbc下，就不会相互干扰.png

按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。 因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠

父子margin之间没有border,padding(父亲的,孩子的不在之间）阻隔出现外边距合并.png

二、去除inline-block内缝隙有哪几种常见方法?

1. 把inline-block元素写一起，不要换行。
2. jianxi
3. margin-left：-4px；取消第一个的margin-left
4. 用浮动，避免用inlineblock
5. 父元素设置font-size:0
   inline-block兼容*display：inline；

三、父容器使用overflow: auto| hidden撑开高度的原理是什么？

触发形成BFC（BFC的全称是 [Block Format Content]，有三个特性
BFC会阻止垂直外边距（margin-top、margin-bottom）折叠；BFC不会重叠浮动元素；BFC可以包含浮动）

四、BFC是什么？如何形成BFC，有什么作用?

BFC：块级格式化上下文，它是指一个独立的块级渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关
阻止外边距合并，清浮动等和IE的hasLayout类似
课件
[相关博客博客：http://www.cnblogs.com/dojo-lzz/p/3999013.html]

五、浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法

子元素脱离文档流。父元素没设置高度，包不住子元素。
A 给父元素加高度
B 给父元素加浮动
C 给父元素加一个空的div，清除两个方向的浮动
D 给父元素加overflow(通过给容器添加下列任意一个样式即可形成BFC overflow;
display: flex;float: left;display: table)
E .clearfix:after{ content: ''; display: block; clear: both;}.clearfix{ *zoom: 1;}
产生原因：计算容器元素高度的时候，浮动元素相当于脱离了文档流

六、以下代码每一行的作用是什么？ 为什么会产生作用？ 和BFC撑开空间有什么区别？

.clearfix:after{ content: ''; display: block; clear: both;}.clearfix{ *zoom: 1;}

在clearfix最后加一个空的元素，转化为块状元素，清楚元素周围的浮动。
zoom：1在IE67下生效，触发haslayaout.

单行溢出隐藏

white space:nowrap;
overflow:hidden;
text-overflow:ellipsis；

设置height：100%的整页大图

从本身设置到body,html:height:100%