输入Div Span元素如何响应位于其上方的float元素？

Question

我们采用了300px宽div，因为我们有一个100px宽label标记并且已经float:left，之后我们立即使用了input场景。我们放置了：

1. width:400px div

2. width:400px span

3. 带有小文字和大文字的<input>

您可以在此处查看他们的呈现方式：http://realution.in/htmlcss/practise/repost.html

任何人都可以解释为什么它们的呈现方式如此不同吗？

{{1}}是块还是内联元素？

Answer 1

它们的渲染方式如此不同，因为您设置了不同的css属性并在每个示例中使用不同的元素。同时将float添加到标签但不添加到任何其他元素，并且不向css clear属性提供任何其他元素会产生此渲染问题。

在A List Apart

上进行了正确的浮点运算

内联：An inline element only takes up as much width as necessary, and does not force line breaks.

阻止：A block element is an element that takes up the full width available, and has a line break before and after it.

来自w3schools

label元素是内联元素。添加float：left将其从文档流中删除并使其成为块元素。明确的display:block不是必需的。

您在span元素上使用的大多数属性都没用，除非您将其设置为display: block，float: left或display: inline-block。现在忽略设定的高度，宽度和边距。如果您想调整范围的大小，则只能使用：line-height和padding

1. • label和input都是内联元素。 input占用换行符，因为它永远不能适合任何东西。输入的大小比其父级大。
   • 在这种情况下，css display: block对标签没有太大作用。因为它有一个浮点数而没有其他元素。在一个好的浏览器中，除了标签实际位于左侧而不是浮动前一个display:block的最后一个示例之外，您不应该看到带有或不带label的标签之间的任何差异。 LI>
2. • div显示在标签的顶部。这是因为float: left标签超出了正常的文档流程。 div元素在它上面，因为div在普通文档流程中。
   • div内的文本位于标签旁边而不是它的顶部，因为文本具有默认的内联显示。如果要从标签中删除文本，div内的文本将在左侧对齐。 添加clear：left到div将恢复正常文档流，将div放在新行
3. • 标签均向左浮动，并在其后显示跨度。跨度上的width: 300px;对内联元素没有任何作用。如果您希望它具有宽度，则应该float，给它display: block或display: inline-block
   • 粉色区域的高度仅由跨度确定，因为这是文档流程中唯一的元素。在最后一个标签之后将overflow:hidden添加到父div或者使用clear:both添加空div将同时修复该框以绕过其中的所有元素。
4. • 标签仍然在左侧浮动，只有这一次内联跨度太大，电子邮件标签不能浮动它，所以它位于电子邮件旁边但较低，有空间。房间在那里，因为跨度只有15像素高，而标签是20px高，这是由line-height属性确定的两个元素