文字环绕注意事项
先上代码
<!DOCTYPE html>
<html>
<head>
<title>文字环绕</title>
</head>
<style>
*{margin: 0;}
p {border:1px solid red;}
img {float:left;
width: 50%;height: auto;
margin:0 5px 0 0;
/* margin-left: 10px; */
}
</style>
<body>
<img src="../dongman.jpg" alt="">
<p>动漫,即动画、漫画的合称,指动画与漫画的集合,取这两个词的第一个字合二为一称之为“动漫”,与游戏无关,并非专业术语。动漫是动画与漫画的集合,动漫与动画的关系是包含与被包含关系,并非同属关系。所有的动画、漫画作品都可以称之为动漫作品,但不可说动画或者漫画是动漫,原因是在语义上:动画和漫画是两种不同的艺术形式的作品,而并无“动漫”这种艺术形式的作品,它只是一个由中国本土所创的合成词。</p>
</body>
</html>
注意:图片的引用一定要在文字
标签的前面,否则没有文字环绕效果。如图:
如果将
标签放在图片引用后面,如图:
为啥会如此:
代码执行顺序从上而下,从左到右依次执行,若p标签在前,浏览器已经给p标签一个定位了,再加浮动,图片就只会在文字下面(如果此时使用定位强制向上移动图片,图片会覆盖文字);若图片代码在前,就会先浮动,脱离文档流,那么文字便环绕在其周围了。