Why Does 'Overflow: Auto' Clear Floats? And Why Are Clear Floats Needed

Why does 'overflow: auto' clear floats? And why are clear floats needed?

The reason why the wrapper doesn't stretch to contain its floats by default is because the floats are taken out of the normal flow of the wrapper, so the wrapper acts as if they were never there. If there is no other content in the wrapper, that means the wrapper won't have any height.

Note that overflow: auto doesn't clear floats — it just causes the element to contain its floats by way of establishing a new block formatting context for them so that they don't intrude to other elements in the parent context.¹ That is what forces the parent to stretch to contain them. You can only clear a float if you add a clearing element after the float. A parent element cannot clear its floating children.

The reason why establishing a new BFC causes an element to contain its floats is detailed here, and the reason why overflow: auto would even cause a BFC to be established is detailed here.

¹ _{OK, maybe "just" wasn't exactly the best adverb to use.}

what is the difference between 'overflow and clear to clear float?

Strange comparison since overflow and clear are completely unrelated. Unless I misunderstood your question. In which case, please rephrase so that we can clarify better.

Anyhow, overflow controls the any excess outside of the width of an element.

The overflow property specifies what happens if content overflows an element's box.

If you have a div with containing a large image and you want to restrict the image to not exceed the width of that container, overflow will do just that by giving it a hidden value. If you want it to scroll after a certain width or height, the scroll value will activate the scrollbars to allow you to do so.

Clear on the other hand, resets the floats.

The clear property specifies on which sides of an element floating elements are not allowed to float.

This is particularly helpful in responsive design to center an item that has been floated to the right in larger displays but you want to reset it to the native left position for smaller devices. Of course, the use of clear can be determined by other factors according to your need of it.

The example above mentioned would look like this

<div class="box">
  <button class="right">Hello</button>
</div>

CSS

.right{
   float: right;
}
@media (max-width: 420px){
   .right{
       clear: right;
   }
}

how does the overflow:hidden; works with float

overflow: hidden; only has a visible effect if you define width and height for that element and its contents would normally go beyond that width and height:

(widthhas a default of 100%, so it doesn't necessarily have to be defined in all situations)

.parent{
    background-color: red;
    padding: 10px;
    overflow: hidden;
    width: 200px;
    height: 15px;    
}
.parent div{
    background-color: #eee;
    float: left;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/float.css">
    <title>Document</title>
</head>
<body>
    <div class="parent">
        <div>product one</div>
        <div>product one</div>
        <div>product one</div>
        <div>product one</div>
    </div>
    <p>this is a paragraph</p>
</body>
</html>

Effect of overflow and clear styles with floats

Why clear:both would cause an element to clear a floated element that isn't directly affecting its position.
It may not be directly affecting its position, but it would still have affected it anyway, because in the absence of any clearance, floats aren't normally restricted in how they affect the rest of the normal flow layout even once they are taken out of it, not even by different parent elements such as your .b content element with the left margin in this case. The only real restriction is that floating elements may only affect elements that come after them in document tree order, i.e. elements that are following (not preceding) siblings, as well as their descendants.
The content that's just above the element within your content column isn't tall enough to push it beneath the floated element. If you remove that declaration, you would see that both .c elements become positioned next to their respective floats as well.
When you add clear, what happens is that it forces the clearing element to be positioned beneath the float regardless of where it ends up horizontally.
Why overflow:auto on the parent element fixes the issue.
This is because any block boxes with overflow other than visible generate block formatting contexts. A property of a block formatting context is that floating boxes outside it can never interact with any boxes inside it, and vice versa.
Once you cause the content element to establish its own block formatting context, your floating element is no longer able to affect any elements inside the content element (see the section on the float property), and the clearing element inside it is no longer able to clear any floats that are outside the content element (see the clear property).

Why do `inline-block` elements auto-clear their children?

Inline-block elements establish new block formatting contexts for their contents. A block formatting context root always tries to contain its floats if sized automatically; see section 10.6.7 of the spec:

In addition, if the element has any floating descendants whose bottom margin edge is below the element's bottom content edge, then the height is increased to include those edges.

This is what makes an inline block able to contain its floats; no clearance is actually involved since no clearing element is introduced after the floating children.

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

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;
}

Why overflow: hidden clears a float?

Because you establish a new Block Formatting Context when using overflow with anything ofther then visible (link to the w3.org specs).

Do clear:both and overflow:hidden work the same way to make a container wrap floated children?

Do clear:both and overflow:hidden work the same way to make a container wrap floated children?

No. They perform different functions.

clear:both

The clear property controls whether an element can be next to or below floated elements that come before it. It controls whether an element can clear the floated elements.

clear:both, when applied to a non-floating, block-level element:

Requires that the top border edge of the box be below the bottom outer edge of any right-floating and left-floating boxes that resulted from elements earlier in the source document.

_{source: https://www.w3.org/TR/CSS2/visuren.html#propdef-clear}

So the clear property more likely applies to a sibling of floated elements. It has nothing to do with stretching the height of div which has float children (as stated in your question).

overflow:hidden (or overflow:auto)

The overflow property, when used with a value other than visible, creates a new block formatting context. This causes the element containing floats to expand in order to contain its floated children.

In summary, one property clears an element past floated elements. The other stretches the container to wrap floated elements. The output may appear the same for both. But each property is fundamentally different.

Why Does 'Overflow: Auto' Clear Floats? And Why Are Clear Floats Needed