1.垂直外边距合并
主要发生在上下相邻的元素之间和父子元素之间,解决方法有:
- 兄弟元素间设置float或inline-block或absolute
- 父子元素间设置border或padding隔开
- 设置margin时最好都使用一个方向top或buttom
2.清除浮动
- 添加空元素,应用clear: both
- 为父元素添加overflow: hidden
- after方法
.container{
*zoom: 1;
}
.container:after{
content: ' ';
display: block;
height: 0;
visibility: hidden;
clear: both;
}
- bootstrap中clearfix方法
.clearfix() {
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
}