方法一: 添加新的元素,應用clear:both;
.clear{clear:both; height: 0; line-height: 0; font-size: 0}
<div class="outer">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="clear"></div>
</div>
方法二：父級div定義 overflow: auto
（注意：是父級div也就是這里的 div.outer）
.over-flow{overflow: auto; zoom: 1; //zoom: 1; 是在處理兼容性問題}
<div class="outer over-flow"> //這里添加了一個class
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<!--<div class="clear"></div>-->
</div>
結果：當然是實現了！
原理：使用overflow屬性來清除浮動有一點需要注意，overflow屬性共有三個屬性值：hidden,auto,visible。我們可以使用hiddent和auto值來清除浮動，但切記不能使用visible值，如果使用這個值將無法達到清除浮動效果，其他兩個值都可以，其區據說在于一個對seo比較友好，另個hidden對seo不是太友好，其他區別我就說不上了，也不浪費時間。
方法三： 偽類:after 方法：
（注意：作用于浮動元素的父親 據說是最高大上的方法 ）
先說原理：這種方法清除浮動是現在網上最拉風的一種清除浮動，他就是利用:after和:before來在元素內部插入兩個元素塊，從面達到清除浮動的效果。其實現原理類似于clear:both方法，只是區別在于:clear在html插入一個div.clear標簽，而outer利用其偽類clear:after在元素內部增加一個類似于div.clear的效果。下面來看看其具體的使用方法：
.outer {zoom:1;} /*==for IE6/7 Maxthon2==*/
.outer :after {
content:'.';
clear:both;
display:block;
width: 0;
height: 0;
visibility:hidden;
} /*==for FF/chrome/opera/IE8==*/
clear:both;指清除所有浮動；
content: '.'; display:block;對于FF/chrome/opera/IE8不能缺少
其中content（）可以取值也可以為空。
visibility:hidden;的作用是允許瀏覽器渲染它，但是不顯示出來，這樣才能實現清除浮動。
