floating div with fluid width

I found some css hack to make it fluid width for floating div. It’s works but i still don’t understand that hacks.

Also i include my favourite pseudo clear fix hack in here.

Layout

    <div class="box">
        <div class="left">
            some text
         </div>
         <div class="right">
            quite a lot of text, actually, really quite a  
            bunch of it, you could say this is really
            quite a heck of a lot of text  
         </div>
    </div>

CSS Fix

    .box {
        position: relative;
        display: block;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .box:before,
    .box:after {
        content: "";
        display: table;
    }
    .box:after {
        clear: both;
    }
    .left {
        width: 150px;
        float: left;
    }
    .right {
        width: auto;
        overflow: hidden;
    }

How the layout should work. The right side div will inherit the remaining width of box div.

    ------------- ------------------------------------
    | some text | | quite a lot of text, actually,   |
    ------------- | really quite a bunch of it, you  |
                  | could say this is really         |
                  | quite a heck of a lot of text    |
                  ------------------------------------

Related Links : http://jsfiddle.net/jackJoe/fxWg7/

Happy CSS Hacks ! :)