How do you avoid the style = clear:both when using floating elements?

Question

Usually when I have floating elements inside a container div, I'll have something like this:

<div class="container">
  <div style="float: left;">content</div>
  <div style="float: left;">content</div>
  <div style="clear:both;"></div>
</div>

I find it extremely annoying and ugly to have that <div style="clear:both;"></div> on every fluid piece of layout. So I tried to do something like this (using css but, for simplicity):

<div class="container" style="clear:both;">
  <div style="float: left;">content</div>
  <div style="float: left;">content</div>
</div>

And did not work. Is it possible to make it work by adding something to the .container class??

Answer 1

.container {
    overflow: hidden; // causes the container to wrap its floated children
}

Answer 2

Edit: Using a clearfix is only necessary in certain cases as explained here. overflow: hidden is the superior method.

There is a technique called clearfix that does not require a clearing element, and has been built with a lot of care for cross-browser compatibility. That leads to a lot of browser-specific CSS, but that can be integrated into an existing style sheet.