1. 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
外边距合并：
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：
外边距合并
大体就是这样，具体如下：
- 前提：
- 相邻兄弟元素：
相邻兄弟元素的外边距会合并（当靠后的元素 清除浮动时除外）。
- 父元素与第一个或最后一个子元素：
如果块元素的margin-top与它的第一个子元素的margin-top 之间没有 border、padding、inline content、 clearance 来分隔，或者块元素的 margin-bottom 与它的最后一个子元素的margin-bottom 之间没有 border、padding、inline content、height、min-height、 max-height 分隔，那么外边距会合并。
空块元素：
如果块元素的 margin-top 与 margin-bottom 之间没有 border、padding、inline content、height、min-height 来分隔，那么它的上下外边距将会合并。
- 外边距合并场景：
- 同一父元素下垂直相邻的兄弟元素；
- 父元素和子元素（下外边距需要考虑相邻）；
- 兄弟元素和他们的子元素；
- 高度为0并且最小高度也为0，不包含常规文档流的元素；
eg：
① 第一种情况：兄弟元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" media="screen">
.container {
border: 1px solid;
width: 300px;
height: 300px; /* 盒子高300px */
}
.div1 {
width: 100px;
height: 100px;
background: rgba(0, 255, 255, 0.5);
margin-bottom: 100px; /* 下外边距100px */
}
.div2 {
width: 100px;
height: 100px;
background: rgba(255, 0, 255, 0.5);
margin-top: 100px; /* 上外边距100px */
}
</style>
</head>
<body>
<div class="container">
<div class="div1">1</div>
<div class="div2">2</div>
</div>
</body>
</html>
效果图：
兄弟元素下边距和上边距合并
如图，两个子元素盒子高度为100px，container高300px，所以中间只有100px，即外边距合并后的100px。
② 第二种情况，父元素与子元素的合并：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" media="screen">
* {
margin: 0;
padding: 0;
}
.container {
/*border: 1px solid;*/ /* 将元素边框去除，其他样式不变 */
width: 300px;
height: 300px;
margin-top: 100px; /* 给div1的父元素加上外边距100px */
}
.div1 {
width: 100px;
height: 100px;
background: rgba(0, 255, 255, 0.5);
margin-bottom: 100px;
margin-top: 100px; /*给div1加上外边距100px */
}
.div2 {
width: 100px;
height: 100px;
background: rgba(255, 0, 255, 0.5);
margin-top: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="div1">1</div>
<div class="div2">2</div>
</div>
</body>
</html>
效果图：
父元素子元素合并
如图所示，在其他样式不变的情况下，父元素的上外边距100px和div1的上外边距100px发生了合并，最终为100px。
③ 第三种情况，兄弟元素以及他们的子元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" media="screen">
* {
margin: 0;
padding: 0;
}
.ct1 {
width: 300px;
height: 300px;
margin-bottom: 95px; /* ct1下外边距95px */
}
.div1 {
width: 100px;
height: 100px;
background: rgba(0, 255, 255, 0.5);
margin-bottom: 100px;
}
.div2 {
width: 100px;
height: 100px;
background: rgba(255, 0, 255, 0.5);
margin-top: 100px;
margin-bottom: 150px; /* div2下外边距150px */
}
.ct2 {
width: 300px;
height: 300px;
margin-top: 90px; /* ct2上外边距90px */
background: rgba(255, 255, 0, 0.5);
}
</style>
</head>
<body>
<div class="ct1">
<div class="div1">1</div>
<div class="div2">2</div>
</div>
<div class="ct2"></div>
</body>
</html>
效果图：
父子元素未合并
如图所示，出现了问题，虽然没有border和padding的限制，但最终的外边距是95px，而不是150px，为此在W3上找到了原因：
bottom margin of a last in-flow child and bottom margin of its parent if the parent has 'auto' computed height
意思就是对于margin-bottom来说，父元素高度需为auto才能和子元素合并。不过经过摸索，发现除了auto还有min-height可以实现效果，不过min-height需要小于等于auto的高度，否则合并完会多出一部分多余的min-height值，所以解决方法就是：ct1的height需要改为min-height：
.ct1 {
width: 300px;
min-height: 300px; /* height改为min-height */
margin-bottom: 95px; /* ct1下外边距95px */
}
正确示范
如图所示，ct1和ct2之间的外边距是150px，说明3个外边距发生了合并，取了最大值150px。
④ 第四种情况，高度为0并且最小高度也为0，不包含常规文档流的元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css" media="screen">
div {
text-align: center;
line-height: 50px;
}
.div1 {
background: rgba(0, 175, 255, 0.5);
border: 1px solid;
}
.div2 {
width: 100px;
height: 50px;
background: rgba(255, 213, 0,0.7);
}
.div3 {
margin: 100px 0 -50px;
height: 0;
min-height: 0;
}
</style>
<body>
<div class="div1">
<div class="div2">2</div>
<div class="div3"></div>
</div>
</body>
</html>
空元素上下合并
如图可以看出，空元素上下进行了合并，与div2的height数值相同为50px。
考虑多边合并：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css" media="screen">
div {
text-align: center;
line-height: 50px;
}
.div1 {
background: rgba(0, 175, 255, 0.5);
border: 1px solid;
}
.div2,.div4 {
width: 100px;
height: 50px;
background: rgba(255, 213, 0,0.7);
}
.div3 {
margin: 100px 0 -50px; /* 将height和min-height删除，假设auto同样可行 */
}
.div4 {
margin-top: 100px; /* div4上外边距为100px */
}
</style>
<body>
<div class="div1">
<div class="div2">2</div>
<div class="div3"></div>
<div class="div4">4</div> /* 增加div4 */
</div>
</body>
</html>
多边距合并
发现了问题，当上下边距合并后为50px，与div4合并的时候，100px大于50px，应该为100px外边距，但是现在外边距是50px，为什么？因为合并规律是：
在负外边距的情况下，合并后的外边距为最大正外边距与最小负外边距之和。
所以并不是根据嵌套合并，而是根据正负来合并，所以-50px和100px合并才得到50px的外边距。
- 如何合并：
- 两个相邻的外边距都是正数时，合并取两者之间较大的值：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" media="screen">
* {
margin: 0;
padding: 0;
}
.ct1 {
width: 300px;
min-height: 300px;
margin-bottom: 95px;
border: 1px solid;
}
.div1 {
width: 100px;
height: 100px;
background: rgba(0, 255, 255, 0.5);
margin-bottom: 100px; /* div1外边距100px */
}
.div2 {
width: 100px;
height: 100px;
background: rgba(255, 0, 255, 0.5);
margin-top: 50px; /* div2外边距50px */
}
</style>
</head>
<body>
<div class="ct1">
<div class="div1">1</div>
<div class="div2">2</div>
</div>
</body>
</html>
正外边距合并
2.两个相邻的外边距都是负数时，合并取两者绝对值的较大值：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" media="screen">
* {
margin: 0;
padding: 0;
}
.ct1 {
width: 300px;
min-height: 300px;
margin-bottom: 95px;
border: 1px solid;
}
.div1 {
width: 100px;
height: 100px;
background: rgba(0, 255, 255, 0.5);
margin-bottom: -50px; /* div1下外边距为-50px */
}
.div2 {
width: 100px;
height: 100px;
background: rgba(255, 0, 255, 0.5);
margin-top: -1px; /* div2下外边距为-1px */
}
</style>
</head>
<body>
<div class="ct1">
<div class="div1">1</div>
<div class="div2">2</div>
</div>
</body>
</html>
双负外边距合并
3.两个外边距一正一负时，合并为两者的相加的和：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" media="screen">
* {
margin: 0;
padding: 0;
}
.ct1 {
width: 300px;
min-height: 300px;
margin-bottom: 95px;
border: 1px solid;
}
.div1 {
width: 100px;
height: 100px;
background: rgba(0, 255, 255, 0.5);
margin-bottom: 50px; /* div1下外边距为50px */
}
.div2 {
width: 100px;
height: 100px;
background: rgba(255, 0, 255, 0.5);
margin-top: -25px; /* div2下外边距为-25px */
}
</style>
</head>
<body>
<div class="ct1">
<div class="div1">1</div>
<div class="div2">2</div>
</div>
</body>
</html>
一正一负外边距
- 防止相邻元素外边距合并：
- 父子关系元素，给父元素加上padding或者border：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" media="screen">
* {
margin: 0;
padding: 0;
}
.ct1 {
width: 300px;
min-height: 300px;
border: 1px solid;
margin-top: 100px;
}
.div1 {
width: 100px;
height: 100px;
background: rgba(0, 255, 255, 0.5);
margin-top: 50px;
}
</style>
</head>
<body>
<div class="ct1">
<div class="div1">1</div>
</div>
</body>
</html>
截断外边距合并
方法二：BFC：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" media="screen">
* {
margin: 0;
padding: 0;
}
.ct1 {
width: 300px;
min-height: 300px;
margin-top: 100px;
overflow: auto; /* 创建BFC */
}
.div1 {
width: 100px;
height: 100px;
background: rgba(0, 255, 255, 0.5);
margin-top: 50px;
}
</style>
</head>
<body>
<div class="ct1">
<div class="div1">1</div>
</div>
</body>
</html>
BFC截断父子元素外边距合并
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" media="screen">
* {
margin: 0;
padding: 0;
}
.ct1 {
width: 300px;
min-height: 300px;
margin-top: 100px;
float: left; /* BFC概念 */
}
.div1 {
width: 100px;
height: 100px;
background: rgba(0, 255, 255, 0.5);
margin-top: 50px;
}
</style>
</head>
<body>
<div class="ct1">
<div class="div1">1</div>
</div>
</body>
</html>
float阻止外边距合并
诸如此类的，还有absolute定位，inline-block，不再赘述。
2.相邻元素：
情况一：inline-block，absolute截断合并，具体情况如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" media="screen">
* {
margin: 0;
padding: 0;
}
.div1 {
width: 150px;
height: 150px;
border: 1px solid;
background: silver;
margin-bottom: 100px;
display: inline-block; /* 用BFC，使渲染方式不同 */
}
.div2 {
width: 150px;
height: 150px;
border: 1px solid;
background: #efe0ce;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="div1">1</div>
<div class="div2">2</div>
</body>
</html>
BFC阻止外边距合并
情况二：一个常规文档流元素的margin-bottom与它下一个常规文档流的兄弟元素的margin-top会产生折叠，除非它们之间存在间隙：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.ct1 {
border: 1px solid;
}
.div1 {
height: 100px;
width: 100px;
background: pink;
margin: 0 0 60px 0;
}
.div2 {
float: left;
height: 50px;
width: 100px;
background: rgba(0, 255, 255, 1);
opacity: 0.4;
}
.div3 {
height: 50px;
width: 100px;
background: rgba(255, 0, 255, 0.5);
margin-top: 40px;
clear: both;
}
</style>
</head>
<body>
<div class="ct1">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
</html>
Paste_Image.png
情况三：
在之前介绍的边距合并产生条件中，有介绍不能含有clearance，或者height，有相应演示，不再赘述。
情况四：
空元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.ct1 {
width: 300px;
height: 300px;
background: rgba(255, 255, 0, 0.5);
border: 1px solid;
}
.div1 {
margin: 100px 0 50px 0;
overflow: auto; /* 用BFC */
}
.div2 {
width: 100px;
height: 100px;
background: rgba(255, 0, 255, 0.5);
margin-top: 50px;
}
</style>
</head>
<body>
<div class="ct1">
<div class="div1"></div>
<div class="div2">
</div>
</div>
</body>
</html>
空元素借助BFC阻止合并
如图所示，可以借助BFC的概念让height=0的元素上下不合并。
- 父子外边距合并样例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" media="screen">
* {
margin: 0;
padding: 0;
}
.ct1 {
width: 300px;
min-height: 300px;
margin-top: 100px;
background: rgba(255, 0, 0, 0.5);
}
.div1 {
width: 100px;
height: 100px;
background: rgba(0, 255, 255, 0.5);
margin-top: 50px;
}
</style>
</head>
<body>
<div class="ct1">
<div class="div1">1</div>
</div>
</body>
</html>
父子元素合并
补充：
关于clearance：
当浮动元素之后的元素设置clear以闭合相关方向的浮动时，根据w3c规范规定，闭合浮动的元素会在其margin-top以上产生一定的空隙（clearance，如下图），该空隙会阻止元素margin-top的折叠，并作为间距存在于元素的margin-top的上方。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.big-box {
width: 100px;
height: 100px;
background: blue;
margin: 20px 0;
}
.floatL {
width: 80px;
height: 80px;
margin: 20px 0;
background: rgba(0, 255, 0, 0.6);
float: left;
}
.clear {
width: 80px;
height: 80px;
margin: 40px 0;
background: red;
clear: both;
}
</style>
</head>
<body>
<div class="wrapper overHid">
<div class="big-box">non-float</div>
<div class="middle-box green floatL">float left</div>
<div class="middle-box red clear">clear</div>
</div>
</body>
</html>
clearance
clearance原理
上面的图中我们可以看到，我们为红色块盒设置的40px的margin-top（这里我们通过相同高度的阴影来将其可视化）好像并没有对紫色块盒起作用，而且无论我们怎么修改这个margin-top值都不会影响红色块盒的位置，而只由绿色块盒的margin-bottom所决定。
通过w3c的官方规范可知，闭合浮动的块盒在margin-top上所产生的间距（clearance）的值与该块盒的margin-top之和应该足够让该块盒垂直的跨越浮动元素的margin-bottom，使闭合浮动的块盒的border-top恰好与浮动元素的块盒的margin-bottom相邻接。
可以得出这样一个式子：r-margin-top + r-clearance = g-margin-top + g-height + g-margin-bottom
经判断，这个例子是正确的，并且可以理解为，两个元素中间含有clearance，那么将不会产生外边距合并，且clearance不是个定值，是自然产生的。以此类推，min-height和height也是类似于这样的原理使外边距无法合并。
由于知识点比较零散，作如下整理：
外边距合并mindmanager
注意图中防止合并里，创建BFC和直接利用浮动、绝对定位、inline-block不同，前者利用BFC独立环境特性，后者利用各自属性特性，区别在此，所以区分着写；至于BFC，后面内容会有BFC的概念，此导图内不再赘述。
附件：链接: http://pan.baidu.com/s/1dEEm8vR 密码: qn91
参考：
W3 Box model
MDN|CSS 外边距合并
w3cschool 外边距合并
深入理解BFC和Margin Collapse
2. 去除inline-block内缝隙有哪几种常见方法?
原理:浏览器bug将inline-block元素标签之间的缝隙视作文本。
** 去除方法**：
1.inline-block内缝隙是html中white-spacing属性处理得到，所以可以删除html中多余的空格来去除缝隙：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#header {
height: 50px;
border-bottom: 1px solid #ccc;
}
.nav > li {
display: inline-block;
background: rgba(255, 0, 255, 0.5);
line-height: 50px;
}
</style>
</head>
<body>
<div id="header">
<ul class="nav">
<li>tag1</li>
<li>tag2</li><li>tag3</li> <!--产生原因，由于-->
<li>tag4</li>
</ul>
</div>
</body>
</html>
inline-block缝隙
或者还可以这样写：
<body>
<div id="header">
<ul class="nav">
<li>tag1</li
><li>tag2</li
><li>tag3</li
><li>tag4</li> <!--分隔开，不留间隙-->
</ul>
</div>
</body>
2.或者用负外边距实现去除效果，不过第一个元素会溢出元素框，需要单独设置：
.nav > li {
display: inline-block;
background: rgba(255, 0, 255, 0.5);
line-height: 50px;
margin-left: -8px; /* 负外边距 */
}
负margin消除inline-block缝隙
3.可以用浮动属性来去除缝隙，不过要记得用BFC将父元素撑开：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#header {
height: 50px;
border-bottom: 1px solid #ccc;
}
.nav > li {
display: inline-block;
background: rgba(255, 0, 255, 0.5);
line-height: 50px;
float: left;
}
.nav {
overflow: auto; /* 用BFC清除父元素浮动 */
background: rgba(255, 255, 0, 0.7);
}
</style>
</head>
<body>
<div id="header">
<ul class="nav">
<li>tag1</li>
<li>tag2</li>
<li>tag3</li>
<li>tag4</li>
</ul>
</div>
</body>
</html>
浮动清除缝隙
4.在父元素写上font-size：0；消除空格占位符的大小以去除缝隙：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#header {
height: 50px;
border-bottom: 1px solid #ccc;
}
.nav {
background: rgba(255, 255, 0, 0.7);
font-size: 0; /* 父元素消除缝隙空白占位符 */
}
.nav > li {
display: inline-block;
background: rgba(255, 0, 255, 0.5);
line-height: 50px;
font-size: 16px;
}
</style>
</head>
<body>
<div id="header">
<ul class="nav">
<li>tag1</li>
<li>tag2</li>
<li>tag3</li>
<li>tag4</li>
</ul>
</div>
</body>
</html>
font-size:0消除缝隙
3. 父容器使用overflow: auto| hidden撑开高度的原理是什么？
- 首先看下overflow的相关内容：
overflow属性规定当内容溢出元素框时发生的事情。
其属性值为：
| 属性值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外 |
| hidden | 内容会被修剪，修建部分是不可见的 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容，且总是显示滚动条 |
| auto | 如果内容溢出，则修剪，并显示滚动条，不溢出不修剪不显示滚动条 |
| inherit | 规定应该从父元素继承 overflow 属性的值，任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。 |
- 再来看看BFC的概念：
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。
首先BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）
可以看出，overflow本身并没有什么特别之处，而是会产生BFC，创造独立布局环境，使元素不受浮动元素的影响。
所以针对撑开父元素的情况，是由于父元素创建了BFC，使父元素形成独立环境，从而浮动元素被包含在内，自然撑开。
4. BFC是什么？如何形成BFC，有什么作用?
在前一个问题里，将BFC的概念简单说了下，以及它其中的一个作用——清除浮动的影响，撑开父元素。下面具体说说BFC的具体情况：
- 形成BFC：
- 用float属性（none值除外）；
- 用绝对定位absolute；
- overflow（visible值除外）；
- display属性为table-cell, table-caption, inline-block, flex, 或者inline-flex
- 作用：
- 撑开父元素（见问题3）；
- 阻止外边距合并（见问题1）；
- 清除浮动的文字环绕影响或位置影响
总结：BFC用法灵活，可以解决很棘手的问题，不过不是万能的，具体问题具体分析（见题1）
5. 浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法
高度塌陷是指，在父元素的height为0时，对其内部元素应用浮动属性，浮动属性使元素脱离文档流，而父元素没有元素可以支撑，从而高度塌陷，变为0。
首先不用浮动，导航栏效果如图：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#header {
border-bottom: 1px solid #ccc;
}
.nav {
background: rgba(255, 255, 0, 0.7);
border: 1px solid blue;
}
.nav > li {
display: inline-block;
background: rgba(255, 0, 255, 0.5);
/*float: left;*/
}
</style>
</head>
<body>
<div id="header">
<ul class="nav">
<li>tag1</li>
<li>tag2</li>
<li>tag3</li>
<li>tag4</li>
</ul>
</div>
</body>
</html>
导航栏
当我为了将inline-block属性的缝隙去除时，采用浮动，效果如下：
.nav > li {
display: inline-block;
background: rgba(255, 0, 255, 0.5);
float: left; /* 子元素应用浮动 */
}
浮动对父元素高度影响
可以看出父元素的蓝色边框变为了一条线，这是因为浮动之后子元素脱离文档流，从而父元素高度塌陷。
解决方法：
1.利用空元素清除浮动：
- 第一种：在html中添加空元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#header {
border-bottom: 1px solid #ccc;
}
.nav {
background: rgba(255, 255, 0, 0.7);
border: 1px solid blue;
}
.nav > li {
display: inline-block;
background: rgba(255, 0, 255, 0.5);
float: left;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div id="header">
<ul class="nav">
<li>tag1</li>
<li>tag2</li>
<li>tag3</li>
<li>tag4</li>
<div class="clear"></div>
</ul>
</div>
</body>
</html>
Paste_Image.png
- 第二种，在CSS中创建空元素：
.nav:after {
content: '';
display: block;
clear: both;
}
伪类效果图
2.使用BFC，使父元素按照BFC渲染，包含住浮动元素：
.nav {
background: rgba(255, 255, 0, 0.7);
border: 1px solid blue;
overflow: hidden;
}
BFC清除浮动影响
如图，父元素高度恢复正常，如果用其他BFC属性也可以，不过有一定的副作用，下面来依次说明：
| 方法 | 说明 |
|---|---|
| overflow | 副作用最小，不过可能会不需要overflow的特性 |
| absolute | 收缩元素宽度，不易解决 |
| float | 收缩元素宽度，影响布局，可借助clear解决 |
| inline-block | 收缩元素宽度，不易解决 |
6. 以下代码每一行的作用是什么？ 为什么会产生作用？ 和BFC撑开空间有什么区别？
.clearfix:after {
content: '';
display: block;
clear: both;
}
.clearfix {
*zoom: 1;
}
未加代码
加上代码
如图所示：
应用这个属性，可以将父元素高度撑开，避免子元素浮动之后，父元素高度塌陷。
| 代码 | 说明 |
|---|---|
.clearfix:after |
clearfix的after伪类选择器，在元素最后应用属性 |
content: ''; |
内容为空 |
display: block; |
表现为块级元素，如果不表现，行内元素不会撑开父元素 |
clear: both; |
清除两边浮动 |
*zoom: 1; |
IE专有属性，缩放比例，也可用于检查BUG，参数设为1的话，多用于清除浮动 |
关于zoom：
这个属性是IE专有属性，其他浏览器没有，它可以设置或检索对象的缩放比，它还有其他一些小作用，比如触发ie的hasLayout属性，清除浮动、清除margin的重叠等。现在已经基本不用这个属性，所以仅在考虑兼容的清除浮动会用到。
本文版权归本人及饥人谷所有，转载请注明来源。谢谢！
