当前位置：文江博客话题详情

输入 Div Span 元素如何响应放置在其上方的浮动元素？

发布于 2024-12-04 20:15:48 字数 579 浏览 0 评论 0原文

我们采用了 300px 宽的 div，因为我们有一个 100px 宽的 label 标签并拥有它 float:left 之后我们立即采取了三种方案。我们放置了：

宽度：400px的输入
一个 div 与 width:400px
一个带有小文本和大文本的 span text

您可以在此处查看它们的渲染方式：http://realution.in/htmlcss/practise/repost.html

任何人都可以解释为什么它们的渲染如此不同吗？

也是一个 block 或 inline 元素吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

恋你朝朝暮暮 2024-12-11 20:15:48

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

对浮动的正确解释是在 A List Apart

内联：内联元素仅占用所需的宽度，并且不会强制换行。

块： 块元素是占用整个可用宽度的元素，并且前后都有换行符它。

来自 w3schools

label 元素是一个内联元素。添加 float: left 会将其从文档流中删除并使其成为块元素。显式的 display:block 是不必要的。

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

- label 和 input 都是内联元素。 input 占用一个换行符，因为它永远无法与任何内容相邻。输入的大小大于其父级。
- 在这种情况下，css display: block 对于标签来说并没有多大作用。因为它有浮动，而其他元素没有。在一个好的浏览器中，您不应该看到带有或不带有 display:block 的标签之间有任何差异，除了最后一个示例，其中标签实际上位于左侧，而不是相对于前面的 浮动>标签
- div 显示在标签顶部。这是因为使用 float: left 标签位于正常文档流之外。 div 元素位于其之上，因为 div 位于正常文档流内。
- div 内的文本位于标签旁边，而不是在标签上方，因为文本具有默认的内联显示。如果您要从标签中删除文本，则 div 内的文本将向左对齐。
  添加clear: left到div将恢复正常的文档流，将div放在一个新行上
- 标签都向左浮动，跨度显示在它们后面。 Span 上的 width: 300px; 对内联元素实际上没有任何作用。如果你希望它有一个宽度，你应该浮动它，给它一个display：block或display：inline-block
- 粉色区域的高度仅由跨度决定，因为这是文档流中的唯一元素。将 overflow:hidden 添加到父 div 或在最后一个标签后添加 clear:both 的空 div 都会修复该框以使其内部的所有元素周围。
- 标签仍然浮动在左侧，只是这次内联跨度太大，电子邮件标签无法浮动在其左侧，因此它位于电子邮件旁边，但位置较低，有空间。房间之所以存在，是因为跨度只有 15 像素高，而标签高 20 像素，这是由 line-height 属性确定的两个元素

They render so differently because you set different css properties and use different elements in every example. Also adding the float to label but not to any other elements, and not giving any other elements the css clear property creates this rendering issue.

A proper explenation of floats is done on A List Apart

Inline: An inline element only takes up as much width as necessary, and does not force line breaks.

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

from w3schools

The label element is a inline element. Adding the float: left removes it from the document flow and makes it a block element. The explicit display:block isnt necessary.

Most properties you use on a span element are useless unless you set it to display: block, float: left or display: inline-block. Right now the set height, width and margin are ignored. If you want to adjust the size of the span you can only use: line-height and padding

- Both the label and input are inline elements. The input takes up a newline because it will never be able to fit next to anything. The size of the input is larger then its parent.
- The css display: block doesnt really do much for a label in this case. Because it has a float and no other element does. In a good browser, you should not see any difference between the label with or without display:block except for the last example where the label will actually be on the left against instead of floating against the previous label
- The div is displayed ontop of the label. This is because with the float: left the label is outside of the normal document flow. The div element is ontop of it, because the div is inside the normal document flow.
- The text inside the div is next to the label and not ontop of it, because text has a default inline display. If you would remove the text from the label the text inside the div would align on the left.
  Adding a clear: left to the div would restore the normal document flow, putting the div on a new line
- The label both float left and the span is displayed after them. The width: 300px; on the span doesnt really do anything on inline elements. If you want it to have a width you should either float it, give it a display: block or display: inline-block
- The height of the pink area is determined only by the span because this is the only element inside the document flow. adding overflow:hidden to the parent div or a empty div with clear:both after the last label will both fix the box to go around all elements inside it.
- The labels still both float on the left, only this time the inline span is so big the email label cant float left of it, so it is positioned next to email but lower, where there is room. The room is there because the span is only 15 pixels high while the label is 20px high, this is for both elements determined by the line-height property