почему float убирает цветовой фон?

Question

В общем вот код, красный фон присутствует

.main{
  width: 1100px;
background:red;

}
.first{
  width: 33%;
  text-align: center;
   background:lime;
}

<div class="main">
  
  <div class="first">
  first 
  </div>
</div>

Но если добавить в класс first свойство float:left или right красный фон пропадает, почему так происходит?

.main{
  width: 1100px;
background:red;

}
.first{
  float:left;
  width: 33%;
  text-align: center;
   background:lime;
}

<div class="main">
  
  <div class="first">
  first 
  </div>
</div>

Answer 1

.main{
  width: 1100px;
  background-color:red;
  position:absolute;
}
.first{
  float:left;
  width: 33%;
  text-align: center;
  background:lime;
}

<div class="main">
  
  <div class="first">
  first 
  </div>
</div>