一个计算高度的小问题(bfc、margin-top BUG)

感觉挺简单的两道题，实际上考察了许多小知识点

第二题：0

containner下两个item都是浮动元素，而浮动元素是脱离文档流的，会造成父元素高度塌陷，也就是不会撑开父元素的高度，所以container高度为0；

第一题：30px

• 首先，container设置border：1px；边框只设置粗细是无效的，必须指定边框的样式，才会出现边框，例：border：solid；
• 其次，container是一个BFC，它里面两个相邻item的上下margin会发生重叠，所以两个item中间只有10px的像素
• 第一个item的margin-top触发了BUG，实际作用在了container身上

还需要知道的其它知识点

1. 只要有元素，html标签的宽度是自动撑满的，html的高度包括了上下边缘处子元素的上下外边距
2. body标签默认自带8px的外边距,只要有元素，body的宽度也是自动撑满的，body的高度不包括上下边缘处子元素的上下外边距(body加入overflow: hidden;body的高度才会恢复)
3. 未设置宽高的div与body标签一样，高度不包括上下边缘处子元素的上下外边距(div加入overflow: hidden;div的高度才会恢复)
4. margin-top的一个bug：在父元素没有设置上边框(border-top)与上内边距(padding-top)并且子元素没有设置浮动属性(float)的时候，第一个子元素的上外边距(margin-top)会作用在父元素身上

关于BFC可以看这位老哥写的，链接在下
什么是BFC？看这一篇就够了