本文是小编为大家收集整理的关于CSS 2.1规范：不折叠父本的边距的理由（当父本是浮动的或有可见之外的溢出时）。的处理方法，想解了CSS 2.1规范：不折叠父本的边距的理由（当父本是浮动的或有可见之外的溢出时）。的问题怎么解决？CSS 2.1规范：不折叠父本的边距的理由（当父本是浮动的或有可见之外的溢出时）。问题的解决办法？那么可以参考本文帮助大家快速定位并解决问题。
问题描述
css 2.1规范，第8.3.11节关于倒塌的边缘状态:
建立新的块格式上下文的元素的边距(这样 由于浮子和"溢出"的元素除了"可见"之外)不 与他们流量的孩子崩溃.
我花了一段时间才意识到块格式上下文是 父母建立并应用于子女的背景 因此，为了使任何不同，浮点或溢出属性具有 在父元素上进行调整(而不是对孩子).
在以下代码段中，相邻儿童分区元素的边界高度 崩溃，因此在任何两个孩子分配元素之间都有垂直间距 最大值(20px，20px)= 20px而不是20px + 20px = 40px和边界高度 在第一个子元素和父级之间以及最后一个子元素之间 和父div的最大值(20px，0px)= 20px而不是20px + 20px = 40px. 请注意，与CSS 2.1规格一样，没有折叠出现在水平方向上.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style type="text/css">
* { margin: 0; border: 0; padding: 0; }
</style>
</head>
<body style="background: green;">
<div id="wrapper" style="width: 400px; background: black;
/* overflow: hidden; *//* float: left; */">
<div id="box1" style="margin: 20px; height: 100px; background: red;">
</div>
<div id="box2" style="margin: 20px; height: 100px; background: blue;">
</div>
<div id="box3" style="margin: 20px; height: 100px; background: red;">
</div>
<div id="box4" style="margin: 20px; height: 100px; background: blue;">
</div>
</div>
</body>
</html>
具有红色Box1元素的最高边缘，并未与父母崩溃，这样的边距将 没有将黑色背景向下推到边缘下方，红色的Box1的边距将 叠加在父元素的黑色背景上.类似的论点适用 到底部的蓝色Box1元素.
现在，就像CSS 2.1规格所提到的那样，如果任何一个" float:left"；或"溢出:隐藏"； 包含DIV的一部分被评论，然后是父母的顶部和底部边界 元素(在这种情况下为0)和第一个孩子的顶部(在这种情况下为10px)边界， 底部孩子的底部(在这种情况下为10px)边界是分开的 结果如下:
现在，这是一个问题:
将该规则介绍给CSS的理由是什么?这只是一个随机的决定吗? 还是以一些真实的实践榜样为动机? (知道这也会帮助我 记住规则，除了满足我的好奇心外).
谢谢.
推荐答案
我唯一可以给出的解释是，块格式的上下文是原子的，从一个块格式上下文中的框可以 Never 在另一个块格式化上下文中与框交互.关于折叠边距的规则似乎与浮动永远不会侵入其他块格式上下文或退出自己的块格式上下文的规则相同.
扩展以下内容:建立新的块格式上下文的框的流量后代参与该盒子的块格式上下文，而框 参与了建立的块格式上下文在布局树上的某个地方.因此，预计盒子本身的边距将在同一块格式的上下文中使用盒子倒塌，但不是后代盒子.
相邻的块级框之间的垂直边缘块格式上下文崩溃.
请注意，它说"在块格式上下文中相邻的块级框" - 这意味着，保证金不会跨块格式上下文崩溃的事实是块格式化上下文的固有属性.但这只是我对规格的解释.我不是作者，所以我不能确定这是否是预期的意思.
更多相关问答