段落和图片混排问题

为什么段落和图片混排时，下面标签选择器里加 float: left; 才可以达到效果

img{
vertical-align:bottom;
float: left;
}

_Crush_ 2020-03-09

源自：CSS浮动 4-11 浮动的其他特性

26

收起

2回答

好帮手慕小班回答被采纳获得+3积分 2020-03-09 19:28:31

同学你好，非常抱歉老师没有理解正确同学的意思，这里可以参考如下内容理解：

1、float: left;元素向左浮动。

2、对div1设置了浮动是指对div1平级的其他元素受到浮动的影响，在课程2分30秒左右的时候有具体的讲解。

对应当img与p平级的时候，就需要设置img的浮动，才能使得对应的平级元素p受到浮动影响，出现图文混排的内容。

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

好帮手慕小班 2020-03-09 17:02:59

同学你好，浮动元素会脱离正常的文档流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示，但是文字是文本流的内容。

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

文本流是指html文本的显示，是相对于文字段落来说的。

如上所述，当元素浮动后，脱离标准文档流，并不会影响文字内容的展示，文字会根据加载顺序，依次开始继续加载，实现图文混排。

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

提问者 _Crush_ #1

1）<div id="div1"> <img src="image/wudaojiaoshi.jpg"/> <p>........</p> </div> 2）#div{ background-color: red; float: left; } img{ vertical-align:bottom; float: left; } p{ text-align: justify; 两端对齐 line-height: 1.2em; } 我想问的是id选择器div里已经有float: left; 且它是img的父级元素，为什么img的标签选择器里还要加float: left;才能显示出来视频中的混排效果，这个float: left;的作用是什么呢？

2020-03-09 18:11:37

相似问题

老师那个ABOUT区图文混排中的文字还插入图片的代码是什么？

为什么我的段落标签不起作用

图片加载问题

手敲空格只是在段落的头上使用无效？

about区图文混排

登录后可查看更多问答，登录/注册

2. 从网页搭建入门JavaWeb

参与学习人
提交作业 676 份
解答问题 9666 个

本阶段将从前端网页搭建入手，到Java Web基础，前后端结合助你完成Java Web小白的蜕变！

本课精华内容

问答作业

4-3个人程序源码，提供给各位参考！

63 1

2-4 编程练习

22 1

text-align和direction有什么区别

13 1

交作业交作业交作业

225 2

是不是只有在JS语言中局部变量的定义才可以放在else语句中

24 1

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载