CODEWITHSUNDEEP
htmlcsscss-floatoverflow
Limpuls
Limpuls

Reputation: 876

Overflow: hidden container doesn't contain floated adjacent element

My overflow: hidden container doesn't contain the adjacent floated element (orange box) inside of itself.

The floated element goes beside the container (section). But when I remove overflow:hidden, the adjacent floated element will go inside the container and respect the container's floated children.

Why is this happening? Does it have anything to do with block formatting context?

Maybe when I apply overflow: hidden; for the container, it triggers a new BFC and will only contain its children and no adjacent floated elements?

Here is a fiddle

Upvotes: 0

Views: 64

Answers (1)

kukkuz
kukkuz

Reputation: 42352

I guess you already know the answer that it is BFC. :)

If you put overflow (other than visible), then it creates a new block formatting context, and it will not make the container invite in the adjacent floated element.

That is why if you do keep overflow: hidden the orange div goes beside the container.

Check this out:

CSS overflow:hidden with floats

BFC info

Upvotes: 1

Related Questions