Why when I put float right the color of my background disappears?

Question

I created a header, with a background, text and image. I want to leave the text on the left and the image on the right. I put the float:right but then the bottom ends up disappearing.

.fundo1 {
  background: linear-gradient(266.22deg, #BFF4FF 38.6%, rgba(255, 255, 255, 0) 163.18%);
  overflow: hidden;
}

.imglabelle {
  position: absolute;
  right: 0px;
  padding: 10px;
}

<header id="fundo1" class="fundo1">
  <h1 class="tdbb">
    Tudo para o seu bebê<br> Entregas para todo o Brasil
  </h1>
  <img src="https://www.placecage.com/gif/100/100" class="imglabelle">
</header>

Answer 1

Friend the problem is not the float, is the position, you put as absolute, then his point of reference is the body in this case... for the point to be the container Father needs his father to have position: relative, so the child is absolutely relative to the father.

Also, missed you put a top in the son... you just put right, but tb is indicated to explicitly place a vertical orientation

.fundo1 {
  background: linear-gradient(266.22deg, #BFF4FF 38.6%, rgba(255, 255, 255, 0) 163.18%);
  overflow: hidden;
  
  position: relative;
}

.imglabelle {
  position: absolute;
  right: 0px;
  padding: 10px;

  top: 0;
}

<header id="fundo1" class="fundo1">
  <h1 class="tdbb">
    Tudo para o seu bebê<br> Entregas para todo o Brasil
  </h1>
  <img src="https://www.placecage.com/gif/100/100" class="imglabelle">
</header>

---

Comment on the float

In some situations when you use float in a son the container father loses the reference of the son in the content-flow, with this the father does not recognize the height of the son. A technique widely used to correct this is the clearfix, you can read more about it in these two questions.

Float vs. inline-block. What are the advantages and disadvantages of each?

What is the effect that the overflow property: Hidden is doing in the code?

Example, notice that the father lost the height reference of the children. In this code below you can only see the red BG of the father because I gave a padding, but if you remove the padding Father’s BG color goes away.

.container {
  border: 1px solid black;
  background-color: #f00;
  padding: 2px;
}
.container div {
  float: right;
  border: 1px solid blue;
}

<div class="container">
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
</div>