爲什麼這些浮動div不能正確顯示？

Question

我試圖創建的另一個內的兩個浮動的div：

<div style="width:100%;height:500px;position:relative;top:15px;">   

     <div style="position:relative;float:left;width:58%;height:100%;left:10px;"> 
      <div id="borderdiv" style="position:relative;width:92%;top:20px;bottom:20px;left:20px;border:1px solid #000;background-color:gray;"> 
       <div style="height:30px;text-align:center;position:relative; "><h2>welcome</h2></div>     
       <div style="position:relative;width:25%;background-color:green;float:left;">floating div1</div> 
       <div style="position:relative;width:25%;background-color:red;float:left;">floating div2</div>    
      </div> 
     </div> 


    </div> 

問題是浮動DIV1和DIV2是ID爲「borderdiv」的div境外。我做錯了什麼？

Answer 1

浮動元素沒有高度，因此#borderdiv不會擴展以包含它們。

您可以使用清除元件來糾正這一點，

<div style="position:relative;width:25%;background-color:red;float:left;">floating div2</div> 
<div style="clear: both" /> 

Demo on JSFiddle.net

Answer 2

因爲你的問題是不是很具體，那麼我的回答很簡單。這只是把div1和div2放在borderdiv中：

<div style="width:100%;height:500px;position:relative;top:15px;">   
    <div style="position:relative;float:left;width:58%;height:100%;left:10px;"> 
     <div id="borderdiv" style="position:relative;width:92%;top:20px;bottom:20px;left:20px;border:1px solid #000;background-color:gray;"> 
      <div style="position:relative;width:25%;background-color:green;float:left;">floating div1</div> 
      <div style="position:relative;width:25%;background-color:red;float:left;">floating div2</div>    
      <div style="height:30px;text-align:center;position:relative;"><h2>welcome</h2></div>  
     </div> 
    </div> 
</div>