Why overflow: hidden solves floating?

Question

I'm failing to understand why overflow: hidden solve my floating problem: I don't want the words to be inside the picture in the left.

I also read Understanding CSS Layout And The Block Formatting Context.

The example is taken from https://internetingishard.com/html-and-css/floats/ but lacks the explanation of why.

.column {
  overflow: hidden;
  float: left;
  width: 31%;
  margin: 20px 1.15%;
  height: 160px;
  background-color: #B2D6FF;
  /* Medium blue */
}

.avatar {
  float: left;
  width: 60px;
  height: 60px;
  margin: 25px;
  border-radius: 40px;
  background-color: #D6E9FE;
}

.username {
  margin-top: 30px;
}

.comment {
  margin: 10px;
  overflow: hidden;
  /* This is important */
}

<div class='column'>
  <div class='avatar'></div>
  <h3 class='username'>Bob Smith</h3>
  <p class='comment'>Aptent vel egestas vestibulum aliquam ullamcorper volutpat</p>
</div>

From a CSS beginner point of view (my view): every CSS solution is a CSS hack. it's time to really understand things. — Stav Alfi, Sep 29 '18 at 16:20
Take a look at [this post](https://stackoverflow.com/questions/9193214/why-does-overflow-hidden-stop-floating-elements-escaping-their-container) — Quentin Veron, Sep 29 '18 at 16:23
@TemaniAfif Call it as you wish, but for me it is just another CSS hack. — Quentin Veron, Sep 29 '18 at 18:57
@QuentinVeron so I invite you to read the duplicate and understand what is happening behind :) ... you will then remove it from you *hacks* list ;) — Temani Afif, Sep 29 '18 at 19:01

score -1 · Answer 1 · answered Sep 29 '18 at 16:28

-1

When you float something, it gets removed from the document "flow", and as such containers will ignore that element since it's removed from said flow. When you add the overflow: hidden property you're telling that container to re-include the floated element and incorporate it into its sizing.

answered Sep 29 '18 at 16:28

wtitus

119
4

Thanks but I think you didn't answer my question: ___Why___ `overflow: hidden` solve ___this specific___ floating problem: I don't want the words to be inside the picture in the left. – Stav Alfi Sep 29 '18 at 16:32

Why overflow: hidden solves floating?

1 Answers1