折叠条件
- 当两个盒子(内外盒子/相邻盒子)处在常规的文档流中,且处于同一个BFC中;
- 没有paddding和border介于他们之间
- 都有紧靠的垂直上下边距
折叠结果
marginTop/Bottom均为正数,结果为其中最大值
marginTop/Bottom均为负数,结果为其中绝对值最大值
marginTop/Bottom一正一负,结果为两者的和
解决方案
- 解决margin距离问题,为父元素第一个子元素添加样式
- border-top/pading-top/overflow:hidden; 会产生副作用
- 前置内容
.parent: brefore {
content:'';
display: table;
height: 0;
}
- 解决子元素浮动后父元素高度问题
overflow:hidden; 副作用
.parent: after{
content: '',
display: tabel,
clear: both,
}