                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /CSS深入理解之float浮动

关于IMG的问题

img放在P标签中不是也可以实现文字环绕的效果么。。。为什么当初会想到另外搞出个float来

hei_yu_fa

2015-11-05

源自：CSS深入理解之float浮动 1-2

关注问题我要回答

1793

操作

收起

2 回答

李晓健回答被采纳 +3 积分
2015-11-05

img放在P标签中是不会出现环绕效果，例如图片在前面，文字在后面，结果会是图片右边只有一行字，其他的字都在图片的下面，图片的右边除了一行字其他的地方是空白。如果图片用了float：left 图片的右边就会有多行字。当图片右边高度都放满字后，文字才会出现在图片的下面。这才是真正的环绕效果。

1 回复有任何疑惑可以回复我~

#1

hei_yu_fa 提问者

非常感谢！

2015-11-06 回复有任何疑惑可以回复我~

#2

为什么我试了一下 <p class="float-left"><img src="http://img1.sycdn.imooc.com//53d60af3000171a002560191.jpg" /></p> 同样可以实现环绕效果

2015-12-15 回复有任何疑惑可以回复我~

#3

xy319733580 回复 yuuuuuuuuuu

是不是<p>...</p>标签内的内容作为一个段落，将一张图片放在此标签内，就相当于把这张图片当作一段文字来处理，是这样吗？

2016-02-23 回复有任何疑惑可以回复我~

618463
2016-04-13

那是因为img是行内块元素，但是加了float属性后，就会变成块元素，具有了块状元素的特征，而p是块元素，自然就能出现环绕效果了；如果img放在p里面，首先后面的文字是肯定不能环绕的，也只有那p里面的文字会出现在图片的右边。

0 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

CSS深入理解之float浮动

参与学习 75970 人
解答问题 461 个

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

本课相似问答

4 回答关于*号，一个简单的问题

6 回答关于例子中2.的疑问。

1 回答关于第一张图片下面那段文字的问题

1 回答关于张老师的课程

1 回答关于回答:@imp183喷子的话

搜索更多本课相关问答

关于IMG的问题

我要回答关注问题

意见反馈帮助中心 APP下载