How exactly does the OOCSS last grid element work

Question

So on OOCSS, they outline their version of a grid. I can't understand exactly what is happening. I know that it is supposed to account for rounding errors with fluid layouts that causes the last element to fall to the next line. How does each rule help with that?

My scss version of the OOCSS last-child pseudo selector:

.grid__col--last {
    display: table-cell;

    *display: block;
    *zoom: 1;
    float: none;

    _position: relative;
    _left: -3px;
    _margin-right: -3px;

    width: auto;

    &:after {
        content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .";
        visibility: hidden;
        clear: both;
        height: 0 !important;
        display: block;
        line-height: 0;
    }
}

Answer 1

I've annotated the lines with specific descriptions.

Overall the things it does are:

1. Account for subpixel rounding errors
2. Create a new formatting context and clear floats

3. Take care of IE6/7 bugs

   .grid__col--last {    
       display: table-cell; /* creates a new formatting context [1] */
   
       *display: block; /* protect old IE from table-cell */
       *zoom: 1; /* create a new formatting context for IE (via hasLayout) */
       float: none; /* removing the float which is on a normal column */
   
       _position: relative; /* next three lines fix an IE6 3px float bug [2]  */
       _left: -3px;
       _margin-right: -3px;
   
       width: auto; /* flexible width so the last col can adjust to subpixel rounding errors
   
       &:after { /* all this bit opens the table cell up so it takes full width - floated cols [3] */
           content: "....";
           visibility: hidden;
           clear: both;
           height: 0 !important;
           display: block;
           line-height: 0;
       }
   }
   

   1. W3
   2. 3px float bug
   3. Stubornella

I think you are missing some bits though. You need the base styles from .col in order to understand last col.