Clear: both or overflow: auto, which is better?

Question

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

I tested it and the functionality works the same way, can someone explain why the two work the same way?

From what I saw in some articles and questions,

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

However, I doubt it, it may ruin my codes in the future.

Here is a list of questions similar to my question. However, he has no answer to my question, perhaps this is vague for me.

hr clear vs div clear. What's better?

3-column html template - content overflow, although there are clear values ​​and a height of 100%

Answer 1

overflow: auto (or hidden ) is unacceptable, at least in cases where the container has a given height, as this gives rise to a scroll bar (or hides overflowing content).

http://jsfiddle.net/xSzcC/

In any case, floating cleaning should be carried out according to the clear rule.

Cleaning for modern browsers is very easy now .

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

In case of rotting the link, the functional part:

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