Float and overflow relation

[webcrab]

Hello everybody!

I'm having a hard time figuring out how floats work in conjunction with overflow. Say I have an unstyled <div> container that holds a 200 by 100 image. If I add a background color to the container it becomes clear that said container's height is exactly 100px. Then I float the picture and div's height shrinks to 0. Why? And what happens here exactly? Does the image get positioned, like, outside the container? It's as if the container doesn't hold the image anymore, and at the same time I suppose it's still in there. Yet it doesn't take up any space inside the container as it's height is now clearly 0 (no background color).

And then why does applying an overflow property fix this, so the div wraps around the picture again (background color is back on)?

This navigation menu example made me post my conundrum on here. When I remove the overflow property, the navigation portion gets stripped of its background color.

The dedicated chapter is absolutely clear to me, but I still can't get why this property has the effects it has in my case.

Thank you for taking the time to read :)

[dsonesuk]

Its always done that! Any floated element placed  within a container element has no substance, so the container will collapse to height 0. Using property overflow reverses that condition for the container element.

[webcrab]

Thank you so much for your reply dsonesuk!

Even though it's weird how I've never come across (or failed to notice) this important aspect of the overflow property -- that it restores a floated element's height. Is that what I should understand by what you refer to as substance?

Again, I appreciate your help!

 

Edit: Also, somewhat unrelated question, but I don't feel like it deserves a dedicated thread. Suppose I have a div container and some text in it that doesn't have any tags surrounding it like so:

<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dolor sed viverra ipsum nunc aliquet bibendum enim.
</div>

Does the text get wrapped in any tags by default when rendered by the browser proper?

Edited September 29, 2019 by webcrab

[dsonesuk]

The height of floated element is always there the ability for the container element to detect that height is the problem.

ALL  except elements using position: and specifically absolute or fixed will not wrap the text, however with some browsers when you don't use properties left, right, top, bottom which are usually used alongside position: and would be set as 'auto' by default will.