Why is text wrapping around a floating element instead of going belows like another div?

This is by design as this is how float works. If you refer to the documentation:

The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow.

You should note 2 features of float elements:

• Removed from normal flow: Which means that others elements can overlap floating element or be overlaped by floating element (like with position:absolute)
• text and inline elements will wrap around: Only text and inline level elements will not be overlap floating element but will wrap around it.

Here is some basic examples to better understand:

.float {
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}

.blue {
  width: 200px;
  height: 200px;
  background: blue;
}

<div class="float"></div>
<div class="blue"></div>

The blue div is overlaped by the float element because it’s a block level element.

It won’t be the case if we make it an inline level element (inline-block)

.float {
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}

.blue {
  width: 200px;
  height: 200px;
  background: blue;
  display:inline-block;
}

<div class="float"></div>
<div class="blue"></div>

When we add text you will notice how the text will wrap around the float element and will be kept inside it’s containing block (the blue div).

.float {
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}

.blue {
  width: 200px;
  height: 200px;
  color:#fff;
  background: blue;
}

<div class="float"></div>
<div class="blue">  some text here some text here some text here some text here some text here some text here some text here some text here</div>

The same happen if we have more of the blue divs:

.float {
  width: 100px;
  height: 100px;
  background: red;
  float: left;
  opacity:0.5;
}

.blue {
  width: 200px;
  color:#fff;
  background: blue;
  margin:5px;
}

<div class="float"></div>
<div class="blue">  some text here some text here s</div>

<div class="blue">  some text here some text here some</div>

To make it easy: a float element will overlap all the block element around it and inline element will wrap around it.