Geek Answers Handbook

Does "clear: both" and "overflow: hidden" work the same as making child elements loaded into a container?

I have a div with floating children.

I know that I can stretch the height in two ways:

.container { border: 2px solid #ccc; margin-bottom: 250px; } .container-2::after { content: ''; display: block; height: 0; font-size: 0; clear: both; } .container-3 { overflow: hidden; } .item { float: left; width: 200px; height: 50px; background: red; margin: 10px; } 
 <div class="container container-1"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="container container-2"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="container container-3"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>

But I think that they have different principles: the clear:both :: after element remains from the brothers with a floating point and causes the parent div to stretch the height; the overflow:hidden style causes the div to have BFC, and according to the standard , BFC will stretch its height to include its floating point children.

Advantages and disadvantages are not important, but how they work.

I'm right, they are different, but have the same result?

+1
source share
1 answer

Do clear:both and overflow:hidden work the same way as do floating children with a container?

Not. They perform different functions.

clear:both

The clear property controls whether the element can be next to or above the floating elements that are in front of it. It controls whether an element can clear floating elements.

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

It is required that the upper border edge of the window be below the lower outer edge of any floating fields on the right and left that were obtained from elements earlier in the source document.

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

Thus, the clear property is more likely to refer to the sibling of floating point elements. This has nothing to do with stretching the height of a div that has floating point children (as indicated in your question).

overflow:hidden (or overflow:auto )

The overflow property, when used with a value other than visible , creates a new formatting block . This causes the element containing the float to expand to contain its floating children.

Thus, one property clears an element past floating elements. Another stretches the container to wrap floating items. The output may look the same for both. But each property is fundamentally different.

Further reading:

+3
source

More articles:


All Articles