Css 浮动DIV和P元素

使用float属性时，两个div元素彼此相邻，但两个段落元素不相邻；相反，“p”元素给出了一个奇怪的结果

另外，奇怪的是，当我浮动两个'div'元素和两个'p'元素时，结果会更好地对齐

我的3个代码示例可能能够解释（请注意：我的第3个代码的链接在下面的评论中。我没有足够的信誉点放置3个链接）：

代码1：

超级英雄{ 背景颜色：黄色； 浮动：左； } #超级恶棍{ 背景颜色：粉红色； }

超级英雄


超级恶棍

您的两个示例在浮动方面的工作原理类似。让您感到困惑并认为

p

版本不起作用的是

p

具有默认的页边顶部/底部（

-webkit-margin before:1em；

在webkit for top中）样式，由浏览器应用。这些边距使第一段（浮动）看起来像是没有浮动的，尽管它是浮动的

通过将边距重置为

0

，很容易进行测试：

超级英雄{ 背景颜色：黄色； 浮动：左； 保证金：0； } #超级恶棍{ 背景颜色：粉红色； }

超级英雄


超级恶棍

所以。。。问题是？为什么只有div、p和“在一个代码中有div和p”的结果会如此不同？