为了了解margin折叠问题,首先需要知道一个概念:块级格式上下文Block Formatting Context(简称BFC ),这是Web页面的一种布局方式,通俗点说,也是指页面上一个渲染区域,里面的元素按文档流中的顺序垂直排列,并且发生垂直方向上的margin折叠,同事这个区域内的元素布局不会对外面的元素有任何影响,反过来,也是一样。那要问了,这个要BFC是怎么产生。1、在W3C标准中有明确的说明,这里就简要概括一下:
当元素满足一下任何一个条件是都会产生一个BFC:
- float属性取值不是“none”
- overflow属性取值不是“visible”
- display的值为 “table-cell”, “table-caption”, or “inline-block”中的任何一个
- position的值不为 “static” 或 “relative”中的任何一个
可以看看下面这个图:
果然按定义规定定义的几个BFC,内部的排列都是垂直排列的。
2、BFC内部垂直方向上的margin折叠:
先看下面的例子:
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>测试</title> 6 </head> 7 <style> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 #father{ 13 width: 2000px; 14 height: 200px; 15 background: #0016d9; 16 } 17 #first-child{ 18 margin-top: 20px; 19 background: chocolate; 20 width: 60px; 21 height: 60px; 22 } 23 #second-child{ 24 background: chartreuse; 25 width: 60px; 26 height: 60px; 27 margin-bottom: 20px; 28 } 29 #three-child{ 30 margin-top:40px; 31 background: fuchsia; 32 width: 60px; 33 height: 60px; 34 } 35 36 </style> 37 <body> 38 <div id="father"> 39 <div id="first-child">box1</div> 40 <div id="second-child">box2</div> 41 <div id="three-child">box3</div> 42 </div> 43 </body> 44 </html>
看到这段代码你可以先画一画可能出现的结果。
下面的这段代码画出来的结果:
结果是不是跟你想得一样呢,不管是不是跟你想得一样,反正跟我想的是不太一样。我开始觉得box1应该蓝色框上边20px,box2和box3应该距离60px(盒子边长就是60px),但是事实上不是这样。box1距离body上边20px,而box2和box3之间距离40px,就是因为发生了折叠,可能有人会问,这里面没有构成BFC啊,其实外面那个根元素就是一个最大的BFC,我们看到的这些元素就在这个大的BFC里面发生了margin折叠。为了让这个折叠现象去除,我们可以让发生折叠的地方建立独立的BFC,因此我们可以给蓝色框加一个属性overflow:hidden,然后给box2和box3再加一个父级框,并添加可以构造BFC的属性。
如下所示:
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>测试</title> 6 </head> 7 <style> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 #father{ 13 overflow: hidden; 14 width: 200px; 15 height: 400px; 16 background: #0016d9; 17 } 18 #first-child{ 19 margin-top: 20px; 20 background: chocolate; 21 width: 60px; 22 height: 60px; 23 } 24 #second-child{ 25 background: chartreuse; 26 width: 60px; 27 height: 60px; 28 margin-bottom: 20px; 29 } 30 #three-child{ 31 margin-top:40px; 32 background: fuchsia; 33 width: 60px; 34 height: 60px; 35 } 36 37 </style> 38 <body> 39 <div id="father"> 40 <div id="first-child">box1</div> 41 <div style="overflow: hidden"> 42 <div id="second-child">box2</div> 43 </div> 44 <div style="float: left"> 45 <div id="three-child">box3</div> 46 </div> 47 48 49 </div> 50 </body> 51 </html>
得到我们想要的结果:
3、总结一下
-
margin折叠的产生有几个条件:
- 这些margin都处于普通流中,并在同一个BFC中;
- 这些margin没有被非空内容、padding、border 或 clear 分隔开;
- 这些margin在垂直方向上是毗邻的,包括以下几种情况:
1、一个box的top margin与第一个子box的top margin
2、一个box的bottom margin与最后一个子box的bottom margin,但须在该box的height 为auto的情况下
3、一个box的bottom margin与紧接着的下一个box的top margin
4、一个box的top margin与其自身的bottom margin,但须满足没创建BFC、零min-height、零或者“auto”的height、没有普通流的子box
垂直方向上毗邻的box不会发生折叠的情况:
- 根元素的外边距不会参与折叠
- 一个有clearance的box的上下margin毗邻,它会与紧接着的下一个box发生margin折叠,但折叠后的margin不会再与它们父box的bottom margin折叠
折叠边距的计算
当两个margin都是正值的时候,取两者的最大值;当 margin 都是负值的时候,取的是其中绝对值较大的,然后,从 0 位置,负向位移;当有正有负的时候,先取出负 margin 中绝对值中最大的,然后,和正 margin 值中最大的 margin 相加。但必须注意,所有毗邻的margin要一起参与运算,不能分步进行。