title: css float -what does it change with respect to line height and position
body: <p>I'm struggling with one issue: have a table cell and button inside it. After I float this button, apart from moving to left/right the vertical position also changes - in particular the floated button moves to the top of the line. For instance:</p>
  
  <pre><code> &lt;table style="width: 100%"&gt;
          &lt;tr&gt;
              &lt;td style="background-color: green;"&gt;
                  &lt;select style="height: 100px;"&gt;
                      &lt;option&gt;Option 1&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;button&gt;One&lt;/button&gt;
                  &lt;button&gt;One&lt;/button&gt;
                  &lt;button style="float: right"&gt;Two&lt;/button&gt;            
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td style="background-color: red;"&gt;
                  &lt;select&gt;
                      &lt;option&gt;Option 1&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;button&gt;One&lt;/button&gt;
                  &lt;button&gt;One&lt;/button&gt;
                  &lt;button style="float: right"&gt;Two&lt;/button&gt;            
              &lt;/td&gt;
          &lt;/tr&gt;    
      &lt;/table&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/qS6gh/1/" rel="nofollow">http://jsfiddle.net/qS6gh/1/</a></p>
  
  <p>Important bit is <strong>: height: 100px</strong>. If I play around with this value, button is always aligned with the select control. But floated buttons always lands in the top fight corner of the line. Why is that? How can I force floated element to align with other? Basically my goal is to have button element in the right corner of table cell.</p>