inline-block、BFC、边距合并 inline-block、BFC、边距合并

1.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例外边距合并的场景大致有以下几种。

1.相邻的同级元素会发生外边距合并。
举例：

同级元素外边距合并 - 锐客网.container { width: 700px; height: 300px; border: 1px solid; } .box1 { width: 100px; height: 100px; border: 1px solid red; margin: 20px; } .box2 { width: 100px; height: 100px; border: 1px solid red; margin: 40px; }

效果：

文章图片

从图中看出虽然两个边框的外边距一个是20px，一个是40px，但它们相邻的边距并不是两者之和60px，而是两者中的最大值40px。
这种情况可以给它们分别再加一个父元素，设置父元素overflow属性。
效果：

文章图片

或者其中最后一个子元素加上float。

文章图片

2.相邻的父子元素，当父元素没有设置边框或者padding时，会发生外边距合并。
举例：

父子元素外边距合并 - 锐客网.header{ background: red; } h1{ margin-top: 130px; }我是段落

效果：

文章图片

阻止外边距合并可以给父元素加上border或者padding或者加上内容。

文章图片
加上边框

文章图片
加上内边距

文章图片
加上内容

3.一个元素没有内容、边框、padding，它本身的上下边距会合并。

自身合并 - 锐客网div { margin:50px; }饥人谷

效果：

文章图片

【inline-block、BFC、边距合并】这种也可以加上border或者padding或者加内容。

文章图片
加上边框

文章图片
加上内边距

文章图片
加上内容 2.去除inline-block内缝隙有哪几种常见方法? inline-block元素之间会有缝隙。
举例：

inline-block缝隙 - 锐客网ul,li { margin: 0; padding: 0; } .content { width: 200px; border: 1px solid red; } .content>li { display: inline-block; background: blue; color: #fff; } 列表1 列表2 列表3

此时，可以看到列表之间有空隙。
效果：

文章图片

有以下几种方法可以消除间隙：

把
标签之间的空白去掉，可以写成：

列表1 列表2 列表3

或者

列表1 列表2 列表3

效果：

文章图片
2.可以用负margin把

标签之间的外边距变小，使两个inline-block元素之间没有空隙。
改动部分的代码：

.content>li { display: inline-block; background: blue; color: #fff; margin-left: -10px; } li:first-child { margin-left: 0px; }

效果：

文章图片

3.利用float属性，浮动元素是水平方向上紧挨着的。设置了浮动，一定要清除浮动。
改动部分的代码：

.content { width: 200px; border: 1px solid red; overflow: auto; } .content>li { display: inline-block; background: blue; color: #fff; float: left; }

效果：

文章图片

4.还可以设置父元素的字体大小为0。这种方法，元素则身的字体大小要设置。
改动部分的代码:

.content { width: 200px; border: 1px solid red; font-size: 0; } .content>li { display: inline-block; background: blue; color: #fff; font-size: 16px; }

效果：

文章图片
3.父容器使用overflow: auto| hidden撑开高度的原理是什么？是根据BFC的特性，父元素使用overflow: auto|hidden撑开高度。
overflow属性作用在块级元素上。它规定了当内容元素溢出元素框时发生的事：裁剪内容，使用滚动条来显示或者直接显示超出部分。
其中：
overflow: auto; 由浏览器定夺，如果内容被修剪，就会显示滚动条
overflow: hidden; 内容会被修剪，并且其余内容不可见。
overflow值不为“visiable”的块级盒子，会为他们的内容创建新的BFC（块级格式上下文）。BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的，同时也不影响外界的元素。
这个特性，可以用于清除浮动，撑开块元素的空间，在浮动的元素上加一个父元素，父元素上设置overflow: auto|hidden，可以撑开高度。
举例：

overflow - 锐客网.box { width: 300px; border: 1px solid; } .box1 { width: 100px; height: 100px; background: #f00; } .box2 { width: 100px; height: 100px; background: #0f0; float: left; } /*.container { overflow: hidden; }*/ .box3 { width: 100px; height: 100px; background: #00f; }

此时效果：

文章图片

加上

.container { overflow: hidden; }

效果为：

文章图片

撑开了高度。
4.BFC是什么？如何形成BFC，有什么作用? BFC是Block Formatting Contexts的缩写，译为块级格式上下文。
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。可以用于清除浮动和合并外边距。
5.浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法指父容器高度并浮动元素脱离文档流，是常规元素忽略了它的存在，从而父元素高度塌陷。
解决方法可以使子元素形成BFC，或者用clear使元素左边或右边或两边不浮动。
6.以下代码每一行的作用是什么？为什么会产生作用？和BFC撑开空间有什么区别？

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

作用：

.clearfix:after{/*在class属性名是clearfix的元素的子元素的最后再添加一个子元素*/ content: ''; /*内容是空*/ display: block; /*设置为块级元素*/ clear: both; /*这个元素左右两边不允许有浮动元素*/ } .clearfix{ /*设置class属性是clearfix的元素*/ *zoom: 1; /*设置缩放比例为1。这是IE专有属性。火狐和老版本的webkit核心的浏览器都不支持这个属性。*/ }

这段代码可以撑开由于浮动导致的塌陷的父元素。第一段是兼容普通浏览器，第二段兼容IE浏览器。
第一段代码利用伪类元素，相当于在父元素末尾加上一个元素，并使这个元素左右不浮动，这样这个元素就会下移，撑开父元素。*zoom:1缩放页面，重新排版，父元素会计算浮动元素的高度，被撑开。
举例：

clear - 锐客网.clearfix { width: 500px; border: 1px solid; } .box1 { width: 100px; height: 100px; background: #f00; } .box2 { width: 100px; height: 100px; background: #0f0; } .box3 { width:100px; height: 100px; background: #00f; float: right; } .clearfix:after{ content: ''; display: block; clear: both; } .clearfix { *zoom: 1; }

效果：

文章图片

如果不加这两段代码，则是下面的效果：

文章图片

父元素没有完全包围子元素。
如果父元素最后一个元素不浮动，添加上述代码，可以清除浮动吗？
举例：

clear - 锐客网.clearfix { width: 500px; border: 1px solid; } .box1 { width: 100px; height: 100px; background: #f00; } .box2 { width: 100px; height: 100px; background: #0f0; float: left; } .box3 { width:100px; height: 100px; background: #00f; /*float: left; */ } .clearfix:after{ content: ''; display: block; clear: both; } .clearfix{ *zoom: 1; }

在IE11中，效果：