为什么浮点数与<div> vs <p>的行为不同？

Question

CSS：

.floatleft {
  float:left;
}

为什么：

<div>
 <div class="floatleft">Hello</div>
 <div>World</div>
</div>

与此不同：

<div>
  <p class="floatleft">Hello</p>
  <p>World</p>
</div>

谢谢！

Answer 1

您提供的两个区块之间的唯一区别是agent stylesheet。段落将具有默认边距，这就是它们可能看起来不同的原因。但是从代理样式表中可以看出，2个块完全相同，看起来应该是相同的。

由Derek提供的JSFiddle：jsfiddle.net/7mnybj3u/1

Answer 2

您对这类问题的绝对最佳参考是“检查页面”，这些日子大多数浏览器都有。您可以通过这种方式分析任何元素的行为。

Answer 3

<p>标记有一个默认边距，这使得浮动工作不同，如果你重置边距，浮动将正常工作！

p { margin:0 }