<div style="background: red;width: 100px;height:100px;margin-bottom: 10px;display:inline-block"></div>//
<div style="background: black;width: 100px;height:100px;margin-top: 20px;"></div>当且仅当下列情况发生，则称两个外边距相邻：
双方都是同一个块格式化上下文中属于正常排版的块级框。
第一个DIV加了display:inline-block。是不是意味着创建了一个新的BFC？这个BFC包括DIV本身和DIV的内容（比如子元素）？还是说不包括DIV 只包括内容（子元素）？
第二个问题：如果包含元素本身？那么下句号怎么解释？不是自相矛盾吗。如果不包元素本身，那上面那就自相矛盾啊。
clear该属性表明元素的框的哪一边不能与先前的浮动框相邻。'clear'属性不考虑在元素自身或者在其它块格式化上下文里面的浮动。
当应用于非浮动的块框时，
首先要理解什么是格式上下文，格式上下文决定了内部元素是如何拍版的。外边距重叠的条件之一是两个盒子处于同一格式上下文中，我们说的创建新的格式上下文是指该盒子的内部元素处于新的格式上下文，而本身仍然处于原来的格式上下文中，这也就解释了为什么对于父子元素，若父元素创建了新的bfc，那么可以阻止margin重叠而子元素创建了新的bfc却不能
只有普通文档流中块级元素的垂直外边距才会发生外边距叠加。行内框，浮动框与绝对定位框之间的外边距不会叠加。
两元素必须相毗邻（没有被内边距、边框以及任何东西隔开）BFC