表浮動溢出裏面的div

Question

我不知道爲什麼表要素投入格超出它的邊界在情況下，它浮動：正確財產？

<div id="bordered_div"> 
<p> Some text 1 
<p> Some text 2 
<table id="myTable"> 
    <tr> 
     <td>Row11</td> 
     <td>Row12</td> 
    </tr> 
    <tr> 
     <td>Row22</td> 
     <td>Row21</td>    
    </tr>   
</table> 
<div> 

#bordered_div { 
    border: 1px solid #8c8c8c 
} 

#myTable { 
    float: right; 
    border: 1px solid #8c8c8c; 
    margin-bottom: 10px; 
    margin-left: 10px; 
} 

請參閱jsFiddle爲清楚起見

我期望表應該是同時在其右側浮起的邊界區域內的地方。

Answer 1

你當然可以做到。如果你希望它們在一行中，你只需要在float:none元素之前放置右浮動元素。因此，表前應段落去：

#bordered_div { 
 
    border: 1px solid #8c8c8c 
 
} 
 

 
#myTable { 
 
    float: right; 
 
    border: 1px solid #8c8c8c; 
 
    margin-bottom: 10px; 
 
    margin-left: 10px; 
 
}

<div id="bordered_div"> 
 
    <table id="myTable"> 
 
     <tr> 
 
      <td>Row11</td> 
 
      <td>Row12</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Row22</td> 
 
      <td>Row21</td>    
 
     </tr>   
 
    </table> 
 
    <p> Some text 1 
 
    <p> Some text 2 
 
<div>