ansaurus

Question

When should floated HTML elements be cleared exactly?

Answer 1

+3 A:

overflow: hidden should be used as a replacement for clearing divs whenever it can be, which is most of the time.

cletus 2010-01-30 00:01:54

Reference: http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

outis 2010-01-30 00:03:11

Note we can also distinguish between stretching parents of floats and clearing.

outis 2010-01-30 00:04:15

Also see http://blue-anvil.com/archives/experiments-with-floats-whats-the-best-method-of-clearance/

cletus 2010-01-30 00:16:14

Answer 2

+2 A:

IF you need to float the elements around an tire block as unit and the containing element needs to expand vertically to the height of whichever is highest. Otherwise the text/inline elements of the non-floated adjacent elements will flow around the float. If this content ends up being taller than your float then youll be ok... the container will expand. If however the floated elemnt is taller, then youll need to clear it if you want the container to be as tall as the float.

prodigitalson 2010-01-30 00:03:44

Answer 3

+4 A:

For block-level, non-replaced elements, when overflow isn't set to "visible" and height isn't "auto", the element's height depends on its descendents (CSS 2.1 § 10.6.6). Thus when you set overflow: hidden on .a, it stretches to contain the floated descendents. The <p> is below .a, so it's below the floats.

Without overflow: hidden, .a doesn't contain the floated children; its calculated height is 0. The <p> is still below .a, but not the floats. The floats push the inline content of <p>, as floats are wont to do.

Try putting borders around .a and paragraphs to more clearly see the difference.

outis 2010-01-30 00:10:33

Answer 4

+1 A:

Just as I replied in your other post http://stackoverflow.com/questions/2166074/when-should-overflowhidden-be-used-for-a-div/2166121#2166121 this is because the child elements of the a div throw the margins out of bound for a when overflow is anything other than visible. When overflow is visible, a technically stops at the boundary of the div for "Mom!". When it is other than visible (overflow, scroll, auto), the boundary continues until it reaches the boundary of its own parent (in this case the right edge of the browser). The new block element may not begin until it has space to go in. Effective when overflow is visible, it may begin directly after the margin boundary of the last floated div. When it is other, it must wait for a full break in the div.

Joel Etherton 2010-01-30 00:11:09

thanks for helping! i now understand this stuff!

bodacydo 2010-01-30 00:23:18

ansaurus

tags:

views:

answers:

When should floated HTML elements be cleared exactly?

related questions