图片加浮动后，他后面的文字会实现环绕效果-慕课网

图片加浮动后，他后面的文字会实现环绕效果

来源：1-2 浮动的原本作用-文字环绕

Bietoulan

2017-03-19 23:03

图片加浮动后，他后面的文字会实现环绕效果，但当图片后紧跟div的时候，div会在图片后面（div占据图片浮动以前的位置），为什么文字不会占据图片浮动之前的位置，而是出现环绕效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<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>

<p>一直有这么一个美丽的误会，说我是张含韵的忠实粉丝，因为左边这种张含韵萝莉时候的照片频繁出现在我的文章中。</p>

<p>实际上，当年，我还在念大学那会儿，我就把我收藏的一些美女照片调成成固定的几个比例，专门用来做演示使用。</p>

<p>分别是128像素，256像素，512像素和原图。然后，非常巧合的是，这些示例图片中序号为1的妹子，就是张含韵。因此，只要有图片演示，无论是使用了1张还是10张，张含韵小妹妹自然都会出现。久而久之，大家都认为我是张含韵的忠实粉丝。</p>

<p>然而，事实是什么呢？</p>

<p>事实是，尼玛我以前还真的是张含韵的忠实粉丝，上大学那会儿，唯一关注的新浪名博就是张含韵的博客。不过现在嘛，普通粉丝，普通粉丝。</p>

</div>

</body>

</html>

写回答关注

CSS深入理解之float浮动

课程将会从感性的认识的角度讲解CSS float属性，浮动的前世今生

75978 学习 · 461 问题

相似问题

回答 1

回答 1

回答 3

回答 1

回答 4