float跑版整理

方法一
增加具有clear:both設定的div元素，在float子區塊後面來清除Float效果，讓父區塊可以成功的包覆子區塊
html:
<div id="well">
<div class="left">left</div>
<div class="clean">消除浮動</div>
</div>

css:
.left{
float:left;
}
.clean{
clear:both;
}

方法二

(1)父區塊設定overflow:auto的屬性

(2)原因overflow屬性原本是用來控制當內容超出顯示範圍時，是否出現捲軸效果的屬性
(3)overflow:auto，也就是為內容嵌入顯示捲軸的顯示區域，但視情況顯示捲軸

html:

<div id="well">

<div class="left">left</div>

</div>

css:

.left{

float:left;

}

#well{

overflow:auto;

}

單純使用Overflow來消除float效果也有它的副作用，如果使用overflow:auto，但不小心內容太多爆出界了，捲軸就會出現。也許你會想用overflow:hidden，強制捲軸別出現，但超出的內容依舊會不見。例如在裡面放了一大段沒有空白(space)字元的內容 (文字不會斷行顯示)；或者在裡頭放了太大張的圖片。

要解決這樣的問題，可以在文字內容區塊設定 word-wrap: break-word，如此可以讓文字內容自動斷行顯示；而針對太大張的圖片，可以設定圖片區塊的 max-width:100% 以及 height:auto，讓它依照父區塊的最大尺寸來延伸，而不會超出界。