p和div1同级时,div1设置了左浮动,p是块级顶上去,为什么没被图片覆盖?

p和div1同级时,div1设置了左浮动,p是块级顶上去,为什么没被图片覆盖?

http://img1.sycdn.imooc.com//climg/5d8c6a5309f8634713660768.jpg

http://img1.sycdn.imooc.com//climg/5d8c6a7d09acbdd413660768.jpg

http://img1.sycdn.imooc.com//climg/5d8c6a9609a7138c13660768.jpg


文字为什么是从图片的右侧开始的,div1浮动了,文字顶上去,但是div1会盖住文字啊。为什么文字反而环绕了?

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,因为div浮动之后脱离了文档流,但是p标签中的文字属于文本流。div1虽然脱离了文档流但是并没有脱离文本流,所以文字不在div1的底部,在右侧。比如:

http://img1.sycdn.imooc.com//climg/5d8c7cc8099c46ca10020522.jpg

对应在页面中的位置:

img的位置;http://img1.sycdn.imooc.com//climg/5d8c7cfb096800d708590476.jpg

p的位置:

http://img1.sycdn.imooc.com//climg/5d8c7d450975f43b08940457.jpg

如上所示,图片虽然脱离了文档流,展示在最上层,但是没有脱离文本流,文字属于文本流,文本流是指html文本的显示,是相对于文字段落来说的。所以文字会显示在图片的右边,这是文本流的加载。

如果我的回答解决了你的疑惑,请采纳。祝:学习愉快~

好帮手慕小班 2019-09-26 16:37:08

同学你好,这里可以这样理解:div1与p同级时,浮动并没有影响里面的文字内容,因为div浮动之后脱离了文档流,但是p标签中的文字属于文本流。div1虽然脱离了文档流但是并没有脱离文本流:

     文档流是指html文档加载解析时从上到下,从左向右,但相对于盒子模型来说,浮动后脱离文档流,但是没有脱离文本流。文本流是指html文本的显示,是相对于文字段落来说的。

所以浮动并不会影响文字内容,文字会从div的右面开始依次加载。

如果我的回答解决了你的疑惑,请采纳。祝:学习愉快~

  • 提问者 天才少年25 #1
    为什么是从图片的右边而不是下面开始显示呢?p应该是块级元素啊,另起一行?
    2019-09-26 16:42:14
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师