本部互いの上に浮い誤っ

Question

は、アイデアは、このような見解を持っていることですDIV：

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> 

はここでフィドルです： https://jsfiddle.net/pga06pss/

最後のdivには：「私はhello world lineの下にいるはず」 - 実際にhelloの直後にトップラインで終わります。その下に表示します。

Answer 1

要素が浮いている別の 要素の隣のスペースに水平方向に収まることができれば、それはなります。 floatと同じ方向にその 要素にクリアを適用しない限り。次に、要素はfloat要素の下に を移動します。

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>

Answer 2

親は、それが浮かんだ子供では折りたたまれています。これを戦うの最良の方法は、clearfix使用することです：

.cf:before, 
 
.cf:after { 
 
    content: " "; /* 1 */ 
 
    display: table; /* 2 */ 
 
} 
 

 
.cf:after { 
 
    clear: both; 
 
} 
 

 
/** 
 
* For IE 6/7 only 
 
* Include this rule to trigger hasLayout and contain floats. 
 
*/ 
 
.cf { 
 
    *zoom: 1; 
 
}

<div> 
 
     <div style="display:block;" class="cf"> 
 
      <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> 
 
       Why am I not on a separate line 
 
     </div> 
 
    </div>

あなたはそれはあなたの例では、それは完全に崩壊しているのに対し、背の高さだ親が持っていることを今気付くでしょうが（0PXの高さ）！

Clearfixソース：http://nicolasgallagher.com/micro-clearfix-hack/

山車上

詳細情報：あなたが含まれていないのでhttps://css-tricks.com/all-about-floats/