比如这样
我们的本意是这样

我们只需要在父容器上加上一个overflow:hidden问题就解决了



块级元素的上边距与下边距有时会拼合成一个外边距，这样的现象称为“margin合并”

margin合并出现的条件：

  • 块级元素
  • 只发生在垂直方向

margin合并的3种场景：

  • 相邻兄弟元素margin合并
  • 父级和第一个/最后一个子元素（上边的情形）
  • 空块级元素margin合并