刚刚遇到一个很离谱的事情，就是我似乎中间应该没有高度，但是在两个盒子自建还是有一个高度。这个高度怎么来的呢？
这时候我们可以找找是谁的原因。把上面注释掉，还有高度，说明是下面盒子的原因。反之，亦然。
进去一找，原来是里面的h2标签撑起来了。
虽然html和css看着很简单，但是有时候写着写着就不知道哪到底出什么问题了。基础还是要掌握好。
为什么出现这种情况？
父级元素内部有子元素，如果给子元素添加margin-top样式，那么父级元素也会跟着下来，造成外边距塌陷。
我以前一般喜欢把小盒子的margin变成0，将大盒子的padding改为小盒子的margin的数值。
或者将父盒子设置成inline-block。
但是还有一种方法，就是给父盒子设置overflow:hidden.
搜索一波：
使用overflow: hidden;可以解决外边距塌陷的问题，原因在于overflow属性控制元素内容溢出时的处理方式。当设置为hidden时，它不仅会裁剪掉超出元素框的内容，而且还会创建一个新的块格式化上下文（BFC，Block Formatting Context）。BFC是网页的可视化CSS渲染的一部分，它是块级盒子的布局过程发生的区域，与页面上的其他元素隔离开来。
创建BFC的条件之一就是元素的overflow属性为除了visible以外的任何值（如hidden、auto、scroll等）。当一个元素成为BFC时，它里面的元素的外边距不会与外面的元素合并，因此可以防止外边距塌陷。
