html - css float - 它相对于行高和位置有什么变化

Question

我正在努力解决一个问题：里面有一个表格单元格和按钮。在我浮动此按钮后，除了向左/向右移动之外，垂直位置也会发生变化 - 特别是浮动按钮会移动到行的顶部。例如：

 <table style="width: 100%">
        <tr>
            <td style="background-color: green;">
                <select style="height: 100px;">
                    <option>Option 1</option>
                </select>
                <button>One</button>
                <button>One</button>
                <button style="float: right">Two</button>            
            </td>
        </tr>
        <tr>
            <td style="background-color: red;">
                <select>
                    <option>Option 1</option>
                </select>
                <button>One</button>
                <button>One</button>
                <button style="float: right">Two</button>            
            </td>
        </tr>    
    </table>

http://jsfiddle.net/qS6gh/1/

重要的一点是：高度：100px。如果我使用这个值，按钮总是与选择控件对齐。但浮动按钮总是落在线路的顶部战斗角落。这是为什么？如何强制浮动元素与其他元素对齐？基本上我的目标是在表格单元格的右上角有按钮元素。

Answer 1

因为按钮通常设置为 display inline-block，有点像文本，所以它们在表格单元格中尊重vertical-align（默认为） - 但随后应用强制它们显示，这意味着它们不再显示为内联或尊重文本流。middlefloatblock