clearing floats

From SkyPHP

There are three ways to clear your floats:

1) overflow: hidden;

drawback: if you need the overflow not to be hidden this will not work for you

<style>
    #container {
        overflow: hidden;
    }
    .floater {
        float: left;
    }
</style>
<div id="container">
    <div class="floater"></div>
    <div class="floater"></div>
</div>

2) .has-floats

drawback: html is not as clean because you have to add an extra class to the html element

<style>
    .floater {
        float: left;
    }
</style>
<div id="container" class="has-floats">
    <div class="floater"></div>
    <div class="floater"></div>
</div>

.has-floats is specified in global.css

<style>
    /* EasyClearing http://www.positioniseverything.net/easyclearing.html */
    .has-floats:after { content: ".";  display: block; height: 0; clear: both; visibility: hidden; }
    .has-floats { display: inline-block; }
    /* Hides from IE-mac \*/
    * html .has-floats { height: 1%; }
    .has-floats { display: block; }
    /* End hide from IE-mac */
</style>

3) empty div method (not recommended)

drawback: html is not clean because you have an extra div

<style>
    .clear {
        clear: both;
    }
    .floater {
        float: left;
    }
</style>
<div id="container">
    <div class="floater"></div>
    <div class="floater"></div>
</div>
<div class="clear"></div>