Why for li with style float:left browser evaluates the height of the ul element to 0?

Question

In the code presented on the gist : https://gist.github.com/1341600 I am trying to use ul/li elements for grouping together some search form elements (instead of table). When in

Answer 1

That's not a bug, it's a feature!

The container of a floated element is shrunken so that other inline elements will flow around it (as per specs).

The 3 options in this case are to:

1. Use a known height value and apply it to the ul element.

   ul { height: 150px; }
   

2. Use the overflow property on the ul element to force the browser to recalculate its height along with all the elements inside of it.

   ul { overflow: hidden; } /* hidden is preferred as it never adds scrollbars */
   

3. Float the container itself. As there is no need to shrink it if it floats by itself.

   ul { float: left; }