How to avoid style = clear: how to use floating elements?

Question

Usually, when I have floating elements inside a container div, I will 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 <div style="clear:both;"></div> on every fluid part of the layout. So I tried to do something similar (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 it didn’t work out. 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 clearfix is ​​only necessary in certain cases, as described here . overflow: hidden is an excellent method.

There is a method called clearfix that does not require a cleaning element, and was built with great attention to cross-browser compatibility. This leads to a large CSS browser, but can be integrated into an existing stylesheet.