Question

使用float属性时，两个div元素彼此相邻，但两个段落元素不相邻;而不是＆＃39; p＆＃39;元素抛出一个奇怪的结果。

另外，奇怪的是，当我漂浮两个＆＃39; div＆＃39;元素和两个＆＃39; p＆＃39;元素，结果更好地对齐。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

代码3：

＆＃13;

#hero {
		background-color: lightcoral;
		float: left;
	}

	#villain {
		background-color: lightcyan;
	}
  
  #superhero {
		background-color: yellow;
		float: left;
	}

	#supervillain {
		background-color: pink;
	}

＆＃13;

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

＆＃13;

为什么只有div的这种不同结果，p只和单个代码中的＆＃39; div和p＆＃39;？

Answer 1

您的示例在浮动方面的工作方式类似。令您感到困惑的是，您认为p版本不起作用的是p在浏览器应用的样式中具有默认上边距/下限（Web {名称为-webkit-margin-before: 1em;）。这些边距使得第一个（浮动的）段落看起来没有浮动，尽管它是。

通过将保证金重置为0来轻松测试：

＆＃13;

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

＆＃13;

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

＆＃13;

浮动DIV和P元素

1 个答案: