CSS 清除浮動的三種方式

代碼：

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

其 css 樣式爲：

.outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;}
.div1{width: 80px;height: 80px;background: red;float: left;}
.div2{width: 80px;height: 80px;background: blue;float: left;}
.div3{width: 80px;height: 80px;background: sienna;float: left;}

展現效果爲：

這裏沒有給最外層的 div 設置高度，但是如果它裏面的元素不浮動的話，那麼這個外層的高是會自動被撐開的。但是當內層元素浮動後，就出現了以下影響：

（1）背景不能顯示 （此處有背景是因爲我設置了padding）  （2）邊框不能撐開 

下面介紹清除浮動的三個方法：

方法一： 僞類 :after 方法 （推薦）

在 css 中添加 :after 僞類

.outer:after{clear:both; content:'.'; display:block; width: 0; height: 0; visibility:hidden;}

其中 clear:both; 指清除所有浮動，content: '.'; display:block; 對於 FF/chrome/opera/IE8 不能缺少，其中 content 可以取值也

可以爲空，visibility:hidden; 的作用是允許瀏覽器渲染它，但是不顯示出來，這樣才能實現清楚浮動。

方法二：父級 div 添加樣式 overflow: auto

即在 css 的 .outer 類中添加一個樣式 overflow: auto;

overflow 屬性共有三個屬性值：hidden, auto, visible。我們可以使用 hiddent 和 auto 值來清除浮動，但切記不能使用visible

值，如果使用這個值將無法達到清除浮動效果，其他兩個值都可以，但是 auto 對 seo 比較友好。

方法三：添加空元素

在 div3 的下面添加一個空元素：

<div class="clear"></div>

在 css 中爲其添加樣式：

.clear{clear:both; height: 0; line-height: 0; font-size: 0;}

應用以上任何一種方法都可以清除浮動，效果如下：