When you add overflow (other than visible) to an element it creates a new block formatting context and in that context the background of an element does not slide under the float but will create a rectangular block to the side of any floated content (assuming there is room). This is what happens when you add overflow:auto to your element called ,data and therefore the element's background no longer slides under the float. It also means that your text will no longer wrap around and under the float should the text content be long enough to do so. Just add a background color to .data and then test with and without the overflow to get a clearer picture of what is going on.
Clearfix has nothing to do with the above and is mainly a means of containing a float within a parent element. floats are removed from the flow so an element that contains olny floats will have no height and no background will show. If you add a clearfix to the parent container then it suddenly recognises the floated content and the background will extend around the floated elements. Again add a background color to a parent element and then test with and without clearfix to see this in evidence.
Floats are complicated beasts but the rules are clear if verbose.