html - Div 错误地 float 在另一个 div 之上

Question

想法是这样的观点:

Hello                           World 
I should be below the hello world line.

html/css 片段:

<div>
    <div style="display:block;">
        <span style="float: left;">
           <label style="width:30%;">Hello</label>
        </span>
        <span style="float: right;">
             <label style="width:70%;text-align:right;">World</label>
        </span>        
    </div>
   <div>
            <label>I should be below the Hello World line.</label>
   </div>
</div>

这是 fiddle : https://jsfiddle.net/pga06pss/

最后一个 div 包含:'I should be below below hello world line' - 实际上在 hello 之后立即结束在顶行，我希望它出现在它下面。

Answer 1

If the element can fit horizontally in the space next to another element which is floated, it will. Unless you apply clear to that element in the same direction as the float. Then the element will move down below the floated element.

https://css-tricks.com/almanac/properties/c/clear/

<div>
  <div style="display:block">
    <span style="float: left;">
               <label style="width:30%;">Hello</label>
            </span>
    <span style="float: right;">
                 <label style="width:70%;text-align:right;">World</label>
            </span> 
  </div>
  <div style="clear:both">
    Why am I not on a separate line
  </div>
</div>