adardesign
adardesign

Reputation: 35701

Is the fact that parent collapses when child/children are floating a bug, or is it intentionally?

is the fact parent collapses when children are floating a bug?

If so why are newer browsers not fixing it

Is it intentionally? for what good reason?

I know at least 6 solutions to get around this issue, I am only asking if this is a bug or not.

Thanks

Upvotes: 1

Views: 156

Answers (4)

Catfish
Catfish

Reputation: 19294

it's meant to be that way. Half way down this article there is a solution to fix some of the potential problems you have have with it.

http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/

Upvotes: 1

Austin Fitzpatrick
Austin Fitzpatrick

Reputation: 7349

from: css-tricks

As anti-intuitive as collapsing seems to be, the alternative is worse. Consider this scenario:

If the block element on top where to have automatically expanded to accomodate the floated element, we would have an unnatural spacing break in the flow of text between paragraphs, with no practical way of fixing it. If this were the case, us designers would be complaining much harder about this behavior than we do about collapsing.

Collapsing almost always needs to be dealt with to prevent strange layout and cross-browser problems. We fix it by clearing the float after the floated elements in the container but before the close of the container.

Upvotes: 4

tahdhaze09
tahdhaze09

Reputation: 2213

I believe thats a function of the float. You are removing the element from its location in the flow and pushing it left. The "space" that it takes up is freed. As opposed to absolute/relative positioning where the object still takes up the space.

I think that's how it goes!

Upvotes: 1

Vivin Paliath
Vivin Paliath

Reputation: 95528

When you float an element, you take it out of the flow of the page. Due to this, the parent won't expand to accommodate the child. Yes, it is intentional (and defined, I believe) behavior.

Here is a tutorial that talks about enclosing floats.

Upvotes: 1

Related Questions