清除float浮动的三种常见方式

一、为float元素后的元素添加 clear 属性

浮动高度塌陷下的副作用的展示：

添加clear属性之后的显示：

二、利用伪元素并使用clear属性
有时我们会遇到上图的情况，float 元素后没有其他元素了，这时该怎么办？固然我们可以在其后添加一个空div，然后利用clear：both一样解决问题，但这种方式并不优雅，伪元素这时候就派上用场了，我们可以写一个.clearfix 工具样式，当给需要清除浮动时，就为其加上这个类。

清除浮动之前的显示：

清除浮动之后的显示：

三、将父元素的overflow属性修改为auto或者hidden

清除浮动之前的显示：

清除浮动之后的显示：