HTML 外边距折叠，以及消除的办法_html/css

Heim

Web-Frontend

HTML-Tutorial

HTML 外边距折叠，以及消除的办法_html/css_WEB-ITnose

Jun 24, 2016 am 11:33 AM

有如下的HTML

1	`<body> <div` `class="page"> <div` `class="mains"> <div` `class="content"></div> </div> </div></body>`

Nach dem Login kopieren

以及如下的css

html,body{ padding: 0px; margin: 0px; width: 100%; height: 100%; }html{ background: aliceblue; }body{ background:antiquewhite; }.page { width: 600px; height: 300px; background: mediumaquamarine;}.mains { width: 300px; height: 200px;background: yellow;}.content{ width: 200px; height: 100px;background:mistyrose;}

Nach dem Login kopieren

在常规流中显示的效果如下（图1）

此时，为.content添加以下样式

1	`.content{width: 200px; height: 100px;background:mistyrose; margin-top: 10px; }`

Nach dem Login kopieren

显示效果（图2）

这里可能会出乎很多人的意料，按我们正常的理解，.content外部有.mains的包围，那.content应该是顶部距离.mains 10px才是，可实际情况他们并没有分开，甚至最终的结果感觉是body顶部距离html顶部10px（至于这感觉对不对呢？也许不完全如此）.这就是“外边距折叠”

接下来我们再给.mains加上margin-top样式

1	`.mains {width: 300px;height: 200px;background: yellow;margin-top: 10px;}`

Nach dem Login kopieren

其显示效果与“图2”一样，那么我们修改.mians的margin-top的值

1	`.mains {width: 300px;height: 200px;background: yellow;margin-top: 20px;}`

Nach dem Login kopieren

显示效果如下（图3）

此时的效果并不是相距30px，而是取了两则中最大的值20px.

接着给.page加上“margin-top: 20px；”效果不变，给body加上也是一样的效果。但如果给html加上该样式

1	`html{ background: aliceblue; margin-top: 20px; }`

Nach dem Login kopieren

显示效果（图4）

从以上结果可得知，在常规流中，html里面的元素（包括body）的外边距都是针对html元素的边缘来确定的。而html元素的外边距是针对浏览器顶部决定的。从其得知，html元素其实生成了BFC.

那么问题来了，如果这样，那设置的html的背景色真的是html元素的吗？（因为设置html的margin-top: 20px;后背景色用的仍是对html元素设置的样式值）会不会其实是浏览器的背景色？

对于“图2”和“图3”，其实我们绝大多数情况要的不是这样的效果，要的其实是针对父元素的margin-top. 对于这种上下级元素而言，他们的margin是针对最近的BFC块来定位的，所以，我们只要能让其父元素生产BFC就可以实现我们想要的效果。例如我对.mains添加以下的样式：

1	`overflow: hidden;`

Nach dem Login kopieren

那么我们想要的效果也就出来了，如下所示：

如果我们不在.mains上添加，而是在.page上添加，那结果将会如下所示

将.mains和.page同时加上overflow: hidden; 其结果如下：

这不就是我们想要达到的效果吗~~

以上是针对“父子关系”的元素外边距折叠以及解决的办法，至于兄弟元素的折叠问题就相对简单多了。当然解决的办法也是一样。

推荐该链接供大家学习：

http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html

根据w3c规范，两个margin是邻接的必须满足以下条件：

必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中。
没有线盒，没有空隙（clearance，下面会讲到），没有padding和border将他们分隔开
都属于垂直方向上相邻的外边距，可以是下面任意一种情况
- 元素的margin-top与其第一个常规文档流的子元素的margin-top
- 元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top
- height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom
- 高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和margin-bottom

以上的条件意味着下列的规则：

创建了新的BFC的元素（例如浮动元素或者'overflow'值为'visible'以外的元素）与它的子元素的外边距不会折叠
浮动元素不与任何元素的外边距产生折叠（包括其父元素和子元素）
绝对定位元素不与任何元素的外边距产生折叠
inline-block元素不与任何元素的外边距产生折叠
一个常规文档流元素的margin-bottom与它下一个常规文档流的兄弟元素的margin-top会产生折叠，除非它们之间存在间隙（clearance）。
一个常规文档流元素的margin-top 与其第一个常规文档流的子元素的margin-top产生折叠，条件为父元素不包含 padding 和 border ，子元素不包含 clearance。
一个 'height' 为 'auto' 并且 'min-height' 为 '0'的常规文档流元素的 margin-bottom 会与其最后一个常规文档流子元素的 margin-bottom 折叠，条件为父元素不包含 padding 和 border ，子元素的 margin-bottom 不与包含 clearance 的 margin-top 折叠。
一个不包含border-top、border-bottom、padding-top、padding-bottom的常规文档流元素，并且其 'height' 为 0 或 'auto'， 'min-height' 为 '0'，其里面也不包含行盒(line box)，其自身的 margin-top 和 margin-bottom 会折叠。

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn