使用下面的clearfix类,问题迎刃而解了。
.clearfix::before,
.clearfix::after{
content: '';
display: table;
clear: both;
}
这是两种问题的综合解决方案:
1. 高度坍塌(引入.box类即可)
.box::after{
content: '';
clear: both;
display: block;
}
2. 垂直外边距重叠
.box::before{
content: '';
display: table;
}