图片加浮动后，他后面的文字会实现环绕效果，但当图片后紧跟div的时候，div会在图片后面（div占据图片浮动以前的位置），为什么文字不会占据图片浮动之前的位置，而是出现环绕效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>浮动的原本作用-文字环绕</title>
<style>
.test-box { width: 600px; margin: 16px auto; line-height: 1.5; font-size: 14px; }
.float-left { float: left; margin: 0 10px 5px 0; }
.red { width:400px; height:200px; background-color:#f00;}
</style>
</head>
<body>
<div class="test-box">
<img src="http://img.mukewang.com/53d60af3000171a002560191.jpg" class="float-left"/>
<div class="red"></div>
<p>一直有这么一个美丽的误会，说我是张含韵的忠实粉丝，因为左边这种张含韵萝莉时候的照片频繁出现在我的文章中。</p>
<p>实际上，当年，我还在念大学那会儿，我就把我收藏的一些美女照片调成成固定的几个比例，专门用来做演示使用。</p>
<p>分别是128像素，256像素，512像素和原图。然后，非常巧合的是，这些示例图片中序号为1的妹子，就是张含韵。因此，只要有图片演示，无论是使用了1张还是10张，张含韵小妹妹自然都会出现。久而久之，大家都认为我是张含韵的忠实粉丝。</p>
<p>然而，事实是什么呢？</p>
<p>事实是，尼玛我以前还真的是张含韵的忠实粉丝，上大学那会儿，唯一关注的新浪名博就是张含韵的博客。不过现在嘛，普通粉丝，普通粉丝。</p>
</div>
</body>
</html>
浮动的破坏性，设置浮动后，父级的高度会塌陷，浮动的元素会移动，文字会重新形成一个box环绕浮动的图片。