一、外边距塌陷
外边距塌陷不是bug，只是css的一种特性。当这种特性跟我们预期的效果有冲突就需要解决。
什么情况下会产生外边距塌陷？外边距合并是BFC内元素边距直接接触。当两个元素处于同一个BFC，并且它们之间没有物理分隔，外边距区域直接接触，就会造成外边距合并。就会选择外边距中较大的一个生效。
什么是BFC？就是一个独立的布局区域，BFC内部的元素和外面的元素互不影响。这里强调一点，只有父子元素的外边距塌陷问题才是因为子元素影响到了父元素的外边距，也就是影响了父元素的外面，所以才能让父元素成为一个BFC的方式解决这个问题。但是同级元素外边距塌陷并不是容器内部元素对外部元素造成影响，而是这两个容器本身之间的影响。所以BFC方式只能解决父子元素外边距塌陷，也就是容器内元素对外部造成影响这种情况才有效。
如何创建一个独立布局区域(BFC)，其实就是常见的display; float; position属性就能创建一个独立的布局区域。
解决方法：创建BFC，添加物理分隔
1、同级元素外边距塌陷
同时设置margin-bottom和margin-top，此时这两个元素本身的外边距就是设置的值，但是实际生效的外边距是这两个值中的较大者，也就是说两个盒子的真实的外边距不是margin-bottom和margin-top的和。
2、父子元素外边距塌陷
原因：父子盒子都没有设置边框，没有物理分隔，就会导致外边距合并。此时给子盒子设置外边距，两者外边距直接接触，此时就会选择较大的外边距生效。
二、高度塌陷
原因：父元素没有设置高度，它的高度是由子元素撑开的，如果子元素设置浮动，父元素的高度就为0
解决方法：
- 给父元素设置高度
- overflow: hidden
- 最后一个子元素后面添加一个盒子
- 伪元素after 用的最多，推荐使用