CSS清除浮动

.clearfix:after {
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    zoom: 1;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

浮动的原理是让图片脱离文档流，直接浮在上面。
一般布局是让内容来自动填充高度，使用浮动后原本填充的高度会消失，父元素高度为0，后续添加内容布局会产生混乱，造成高度塌陷，可以利用清除浮动来解决父元素高度塌陷的问题。