margin塌陷与margin合并

margin塌陷

父子元素

解决弥补方法

1. 设置boder
2. 改用padding
3. bfc

块级格式化bfc

特定的盒子会遵循另一套语法规则（会解决margin塌陷）

如何触发bfc

 
position: absolute;

display: inline-block;

float: left;  /* 或float: right; */

overflow: hidden;

margin合并

兄弟元素

解决办法

1. 改动html元素，包住那个元素
2. 通过计算(推荐使用)

浮动

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

::before和::after伪元素：是行级元素
位于元素内容的第一个第一个逻辑位(::before)和最后一个逻辑位(::after)