清除浮動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