<head>
<title>無標題文檔</title
<style type="text/css">
div#outter {width:200px;height:auto;}
div#wrapper {}
p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
div#footer {clear:both;}
</style>
</head>
<div id="outter">
<div id="wrapper">
<p>ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p>
</div>
<div id="footer"></div>
</div>
</body>
</html>
1、最開始，div#wrapper沒有設置任何樣式，<p></p>中內容顯示正常，過長部分省略號顯示，如圖1：
（圖1）
2、將div#wrapper設置爲
div#wrapper {float:left;}
此時，<p></p>中內容就會完全顯示，不能達到省略號顯示效果，如圖2：
（圖2）
3、給div#wrapper添加“width：auto”
div#wrapper {float:left;width:auto;}
<p></p>中內容仍然會完全顯示，不能達到省略號顯示效果，如圖3：
（圖3）
4、給div3#wrapper指定一個寬度，這裏設置爲父元素的100%
此時，<p></p>中內容能達到預期效果，如圖4：
（圖4）
所以，是包裹<p></p>的div#wrapper設置爲float後，其位置雖然還是根據父元素div#outter定位，但是其寬度並不受父元素限制。
因而，當一個元素設置爲float後，必須爲其指定具體的width。
解釋可能不太正確，歡迎指正！