css - clear:both or overflow:auto, which is better?

Question

I really don't understand what's the difference between clear:both and overflow:auto

I tested it out and the functionality works the same way, would someone explain why those two works the same way?

From what I've seen in some articles and questions,

overflow:auto can be used in a container with floats inside it. and it takes up no space to using an empty div.

Still, I have doubts on it, it might screwed up my codes in the future.

Here are the list of questions that's similar to my question. Yet, it doesn't have the answer to my question, probably it's vague for me.

hr clear vs div clear. Which is better?

3 column html template - content overflows though there is clear both and height is 100%

Answer 1

overflow: auto (or hidden) is not acceptable at least in cases where the container has a set height as this will engender a scrollbar (or hide the overflowing content).

http://jsfiddle.net/xSzcC/

Float clearing is intended to be done by the clear rule anyway.

Clear-fixing for modern browsers is very easy now.

http://jsfiddle.net/xSzcC/1/

In case of link rot, the functional part is:

.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}