问答详情
源自:1-2 浮动的原本作用-文字环绕

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

图片加浮动后,他后面的文字会实现环绕效果,但当图片后紧跟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>


提问者:Bietoulan 2017-03-19 23:03

个回答

  • 慕粉1938543148
    2017-03-19 23:15:14

    浮动的破坏性,设置浮动后,父级的高度会塌陷,浮动的元素会移动,文字会重新形成一个box环绕浮动的图片。