css - float DIV 和 P 元素

Question

当使用float属性时，两个div元素相邻，但两个段落元素不相邻；相反，'p' 元素会抛出一个奇怪的结果。

此外，奇怪的是，当我 float 两个“div”元素和两个“p”元素时，结果对齐得更好。

我的 3 个代码示例可能能够解释(请注意:我的第 3 个代码的链接在我下面的评论中。我没有足够的声誉点数来放置 3 个链接):

代码 1:https://jsfiddle.net/dipeshsukhani/v7r45zeg/

#superhero {
  background-color: yellow;
  float: left;
}

#supervillain {
  background-color: pink;
 }

<p id="superhero">
  SUPERHERO
</p>
<p id="supervillain">
  SUPERVILLAIN
</p>

代码 2:https://jsfiddle.net/dipeshsukhani/51mtncx8/

#hero {
  background-color: lightcoral;
  float: left;
}

#villain {
  background-color: lightcyan;
}

<div id="hero">
  HERO
</div>
<div id="villain">
  VILLAIN
</div>

代码 3:

#hero {
		background-color: lightcoral;
		float: left;
	}

	#villain {
		background-color: lightcyan;
	}
  
  #superhero {
		background-color: yellow;
		float: left;
	}

	#supervillain {
		background-color: pink;
	}
  

<div id="hero">
	HERO
</div>
<div id="villain">
	VILLAIN
</div>
<p id="superhero">
	SUPERHERO
</p>
<p id="supervillain">
	SUPERVILLAIN
</p>

为什么仅 div、仅 p 和“div 和 p 在一个代码中”的结果如此不同？

Answer 1

您的两个示例在 float 方面的工作方式相似。让您感到困惑并让您认为 p 版本不起作用的是 p 具有默认的顶部/底部边距 (-webkit-margin-before: 1em; 在 Webkit 中用于 top) 浏览器应用的样式。这些边距使第一个( float 的)段落看起来好像没有 float ，尽管它是 float 的。

通过将 margin 重置为 0 可以很容易地进行测试:

#superhero {
  background-color: yellow;
  float: left;
  margin: 0;
}

#supervillain {
  background-color: pink;
}

<p id="superhero">
  SUPERHERO
</p>
<p id="supervillain">
  SUPERVILLAIN
</p>