css - 块级元素浮动和行级元素浮动的不同？

问题描述

问 题

代码：

效果：

问题1：
图像进行左浮动之后，文字环绕着图片，想要设置图片和文字之间的距离，为什么只能设置图片的padding或者margin,而设置段落的padding和margin不能生效？

这个和段落的盒模型有关：如下：

问题2：
也不明白为什么段落的盒模型是这个样子的？好像图片也在段落的盒模型里面一样？

代码：

效果：

问题3：
同样是让第一个子元素向左浮动，但是为什么第二个子元素是被覆盖 而不是环绕浮动的元素呢？

解决方案

问题1：
p的宽度不是图片右侧那段文字的宽度，而是整个宽度，所以你可以给p设padding，设置之后整段文字确实是会向内缩，但边缘不是和图片接壤的地方，所以不会和图片隔出距离。看图，第一张是p不加padding的时候，第二张是p加上padding的时候：


问题2、3：
img向左浮动之后，p会当他不存在，所以跑到页面左上角去，也就是img的背面。但是p里面的文字会知道浮动的img的存在，所以围绕图片显示文字，这个特性正是当年为了用float模仿传统印刷业这种文字围绕图片的效果所设定的。

这篇关于css - 块级元素浮动和行级元素浮动的不同？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！