表中浮动溢出div

Question

我想知道 div 元素在 div 属性的情况下放入 div 的原因是什么？

<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元素之前放置右浮动元素。所以表格应该在段落之前：

＆＃13;

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;