如何优雅的清除浮动?

有条件的话尽量使用弹性盒布局，就不会有烦人的浮动问题了。
当一个盒子的子元素浮动后，父元素的高度会塌陷。在css中给父元素添加伪元素即可清除，代码如下：

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

然后在父元素的类中引用clearfix类即可。
before微元素可防止元素顶部空白崩溃（即margin叠加或者叫顶部塌陷）， display:table clear:both创建一个匿名的表格单元，会触发浏览器的BFC，即渲染独立，浮动元素的高度计算在父元素的总高度之内。
如此，清除浮动就完成了。