清除浮动float (:after方法)

#:after方法。（注意：作用于浮动元素的父亲）

<div class="outer over-flow">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>

原理：利用:after和:before来在元素内部插入两个元素块，从而达到清除浮动的效果。其实现原理类似于clear:both方法，只是区别在于:clear在html中插入一个div.clear标签，而outer利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。

.outer { zoom:1; } //为了兼容性，因为ie6/7不能使用伪类，所以加上此行代码。
.outer:after { clear:both;content:'';display:block;width:0;height:0;visibility:hidden; }

:after 的意思是再.outer内部的最后加入为元素:after

• 首先要显示伪元素，所以display:block，
• 然后为伪元素加入空内容，以便伪元素中不会有内容显示在页面中，所以， content:""；
• 其次，为使伪元素不影响页面布局，将伪元素高度设置为0，所以， height:0，
• 最后，要清除浮动，所以，clear:both。
  参考网址：
  https://www.cnblogs.com/zhongjiang/p/6440355.html