1 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
- 定义
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 - 场景
1父元素与子元素 外边距合并（没有内边距或边框把外边距分隔开）
2子元素与子元素 外边距合并
3元素自身 外边距合并（空元素，它有外边距，但是没有边框或填充） - 范例
1子元素111的上外边距与父元素合并
2子元素111的下外边距与子元素222的上外边距合并为20px (同理2与3)
3元素.bo的内容为空，自身外边距合并，再与元素333外边距合并，再与父元素合并
- 不合并的方法
1设置内边距或边框把外边距分隔开
2触发BFC
2 去除inline-block内缝隙有哪几种常见方法?
1 去除标签之间的空格（即不换行or拆开标签）
2 使用负margin
3 使用float
4 给父容器设置font-size=0
例子
去除inline-block内缝隙的几种常见方法
3 父容器使用overflow: auto| hidden撑开高度的原理是什么？
理解1:
overflow:hidden 的意思是超出的部分要裁切隐藏掉
那么如果 float 的元素不占普通流位置
普通流的包含块要根据内容高度裁切隐藏
如果高度是默认值auto
那么不计算其内浮动元素高度就裁切
就有可能会裁掉float
这是反布局常识的
所以如果没有明确设定容器高情况下
它要计算内容全部高度才能确定在什么位置hidden
浮动的高度就要被计算进去
顺带达成了清理浮动的目标
来源：知乎
理解2:
overflow:hidden 触发BFC
根据BFC规则：计算BFC的高度时，浮动元素也参与计算
4 BFC是什么？如何形成BFC，有什么作用?
-
定义
块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。 -
渲染规则
1 内部的Box会在垂直方向，一个接一个地放置。
2 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4 BFC的区域不会与float box重叠。
5 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6 计算BFC的高度时，浮动元素也参与计算 -
生成
1 根元素
2 float的值不为none
3 overflow的值不为visible
4 display的值为inline-block、table-cell、table-caption
5 position的值为absolute或fixed -
作用
1 防止父容器高度坍塌
2 多栏布局的一种方式
3 防止垂直 margin 重叠
来源&例子
5 浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法
-
定义
因为父元素中内部高度是普通流中的块元素撑起来的，当没有指定高度的父元素中的子元素全部都浮动时，父元素的高度会变成0 -
解决 (触发BFC)
1 给父容器设置overflow: auto| hidden
2 给子元素末尾添加：after
6 以下代码每一行的作用是什么？ 为什么会产生作用？ 和BFC撑开空间有什么区别？
.clearfix:after{ 在class=clearfix的div后添加一个伪元素
content: ''; 内容为空（多与伪元素配合使用）
display: block; 显示为一个块级元素（行内元素无法撑起高度）
clear: both; 左右清除浮动
}
.clearfix{ IE6/7通过zoom:1可以触发hasLayout
*zoom: 1; 用来清除浮动、避免容器高度崩塌的。
}
区别：
BFC是形成一个独立空间来包容浮动元素
这个方法是利用伪元素清除浮动将父容器撑开
网友评论