html - div 内表格 float 溢出

Question

我想知道为什么放入 div 的 table 元素在具有 float:right 属性的情况下会超出它的边界？

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