清除浮动和垂直外边距重叠问题

用after伪类选择器

代码如下

.clearfix::before,
.clearfix::after
{
content:' ';
display: table;
clear:both;
}

用这种方式既可以解决因为浮动造成的父元素高度塌陷问题，也可以解决子元素将垂直外边距传递给父元素的情况。