1、在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
Reference:w3边距合并解释
在文档流中，块级元素会从上往下依次挨着排列，此时前一个块级元素的margin-bottom会与后一个块级元素的margin-top合并。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
*{
margin:0;
padding:0;
}
.ct{
border:1px solid
}
.box1{
width:100px;
height:100px;
background:#f00;
margin:20px;
}
.box2{
width:100px;
height:100px;
background:#0f0;
margin:20px
}
</style>
</head>
<body>
<div class="ct">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
</body>
</html>
output
可以看出，尽管绿盒的margin-top为20px，红盒的margin-bottom为20px，但此时中间间隙并非40px,而是合并为20px。若设置绿盒
margin:10px 20px;;则中间缝隙依旧为20px，故外边距合并最终留存的结果是两者外边距较大的那一个。
output
总结规则如下：
<blockquote>
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。
</blockquote>
若要让外边距不发生合并，从根本上来说是需要让两个元素处于不同的BFC中，即让其中一个元素处在一个新的BFC中；
生成BFC的规则：
<blockquote>
- 根元素
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
</blockquote>
由于float与position:absolute/fixed会改变文档流，所以我们一般考虑添加一个父级元素，给其添加overflow:hidden/auto;或display:inline-block;来生成新的BFC。
父子外边距合并例子
如下图所示，父子的margin均为20px,显然父子上下外边距重合，发生合并。
父子外边距合并
消除方法：
- 给父元素增加一个不为0填充(border,paddding均可);
- 给父级元素增加
overflow:hidden/auto;。
2、去除inline-block内缝隙有哪几种常见方法?
- 不换行，缝隙出现的本质原因是在于换行所出现的一个空格符号，所以不换行能够解决问题，但是代码不规整；
- 使用浮动float：left 父元素需要用overflow：auto或者hidden撑开。
- 给父元素font-size设为0，需要在自己在inline-block设置一下字体大小。
3、父容器使用overflow: auto| hidden撑开高度的原理是什么？
当子元素全部float脱离文档流之后，父容器可视为内部没有任何子元素而塌陷，overflow值为auto| hidden时可以闭合元素修复高度坍塌，清除浮动。
4、BFC是什么？如何形成BFC，有什么作用?
Reference：前端精选文摘：BFC 神奇背后的原理
其实第一题已经详细解答了如何形成BFC和BFC的作用，现只列出何为BFC：
BFC 定义
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC布局规则：
内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算。
5、浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法？
当子元素全部float脱离文档流之后，父容器可视为内部没有任何子元素而塌陷。
解决方法：
- 给父元素添加
display: inline-block; overflow: auto; 或 overflow: hidden;样式，使父容器形成BFC空间。 - 使用伪类选择器after 给父元素最后加上子元素并且具有clear：both属性，也可以清除浮动。
.clearfix:after{ content:''; display:block; clear:both; }
6、以下代码每一行的作用是什么？ 为什么会产生作用？ 和BFC撑开空间有什么区别？
.clearfix:after{ content: ''; /*添加一个空字符*/
display: block; /*变为块级元素*/
clear: both; /*清除浮动*/
}
.clearfix{
*zoom: 1; /*为了兼容IE6\7*/
}
在浮动元素后添加一个没有内容（实际上有一个空字符）的块级元素，当其清除浮动后，所在位置正好是所有浮动元素的最下面，自然由其撑起的父级元素能够包裹住所有的子元素。
与BFC的区别：
BFC撑开空间是使父元素本身形成一个独立空间来包容浮动元素，而这个方法是使用内容将父容器撑开。
网友评论