輸入分隔跨度元素如何響應位於其上方的浮動元素？

Question

我們採取了300px寬div，因爲我們有一個100px寬label標記，並有float:left，並在那之後我們採取了三種情況。我們放在：

1. 的input與width:400px

2. 一個div與width:400px

3. 一個span小文本和大文本

你可以看到他們是如何渲染這裏：http://realution.in/htmlcss/practise/repost.html

任何人都可以解釋爲什麼他們呈現如此不同？

而且是<input>一個塊或直列元件？

Answer 1

它們呈現如此不同，因爲您設置了不同的css屬性並在每個示例中使用了不同的元素。還要將float添加到標籤中，而不是添加到其他任何元素，並且不會給出任何其他元素，而css clear屬性會創建此呈現問題。

浮標的適當explenation上

內嵌完成：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對於標籤確實沒有多大作用。因爲它有一個浮動，沒有其他元素。在一個好的瀏覽器，你不應該看到標籤之間的任何差別有或沒有除最後一個例子，其中的標籤實際上是在左邊障礙，而浮動上日label
2. • 的display:block div顯示在標籤的頂部。這是因爲float: left標籤不在正常的文檔流程中。 div元素在它的上面，因爲div在正常的文檔流中。
   • div內的文本位於標籤的旁邊，而不是ontop，因爲文本具有默認的內聯顯示。如果您要從標籤中刪除文本，div內的文本將在左側對齊。 添加明確：左股利將會恢復正常的公文流轉，把DIV在新行
3. • 標籤都留下float和跨度後，他們顯示。跨度上的width: 300px;並不真正對內聯元素做任何事情。如果你想要它有一個寬度，你應該要麼float它，給它一個display: block或display: inline-block
   • 粉紅色區域的高度僅由跨度確定，因爲這是文檔流程中唯一的元素。將overflow:hidden添加到父div或空的div與clear:both後最後一個標籤都將固定框繞過其中的所有元素。
4. • 標籤仍然都浮在左邊，只是這一次的內嵌跨度這麼大的郵件標籤不能左浮動的，因此它是未來定位於電子郵件，但較低的，其中有房。房間那裏，因爲跨度僅爲15個像素高，而所述標記是20像素高，這是由line-height屬性

確定兩個元件