<html>
<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>
<div id="outter">
<div id="wrapper">
<p>ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p>
</div>
<div id="footer"></div>
</div>
</body>
<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。
解释可能不太正确，欢迎指正！
2107
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
