0

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

kukkuz
  • 41,512
  • 6
  • 59
  • 95
Limpuls
  • 856
  • 1
  • 19
  • 37
  • Questions seeking debugging help must include the shortest code necessary to reproduce it **in the question itself.** NB - **Please don't abuse the code blocks to get around this requirement**. – Paulie_D Aug 16 '16 at 19:33
  • @Paulie_D Sorry, I'm new SO user and I didn't try to get around anything. Will fix it. – Limpuls Aug 16 '16 at 19:45
  • Welcome to Stack Overflow! I edited your question breaking it up in paragraphs to make it more easily readable. With backticks you can format code (such as the CSS). Hyperlinks can be embedded with the hyperlink button. Please add the relevant HTML inside the question (not only in the fiddle). Good luck! – trincot Aug 18 '16 at 20:13

1 Answers1

1

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

Community
  • 1
  • 1
kukkuz
  • 41,512
  • 6
  • 59
  • 95
  • Okay, thanks for some info. But do you know why then orange box sits beside container so nicely? Like, why it's not overlapping other elements or anything, but it goes beside section. – Limpuls Aug 16 '16 at 19:47
  • as you have not set the width for the `section` it auto-adjusts... try setting the width and now it will not sit beside very nicely. – kukkuz Aug 17 '16 at 02:58
  • @Limpuls just curious, so following up on this. Could you please post your findings if you were able to use this in any practical situation? Also would like your upvote / accept answer if the answer helped you. Thanks! – kukkuz Aug 21 '16 at 03:52