html - Understanding CSS Float

Question

I am leanring HTML and CSS. I have been muddled up by float property. I don't why this is confusing me a lot. I am using these articles to understand. I got this part when we apply float element is put out of the normal flow and floated to left and right of it's parent based on the value of float and the content below it will flow around it and try to wrap it. The part where I am confused is I'll explain by example. I have three div A, B, C. As I have shared in the snippet:

body {
  background: #eaeaed;
}
div{
  border : 2px solid #ff00ff;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.divA{
  background: yellow;
}
.divB{
  background: green;
}
.divC{
  background: blue;
}

<div class="divA">
  <span>Div A</span>
</div>
<div class="divB">
  <span>Div B</span>
</div>
<div class="divC">
  <span>Div C</span>
</div>

Answer 1

The box of B moves underneath A's original position, but the text does not. The text has to wrap around the float instead, since the main idea of floats is for text to wrap around rather than be overlapped by the floating content.

The word "wrap" implies that the text should appear next to A rather than underneath it, but the width of the two elements is the same leaving no room for the text to appear side by side with A. Increasing the width of B shows that the text does start off side by side when there is room for it to do so:

body {
  background: #eaeaed;
}
div{
  border : 2px solid #ff00ff;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.divA{
  background: yellow;
  float: left;
}
.divB{
  width: 160px;
  background: green;
}
.divC{
  background: blue;
}

<div class="divA">
  <span>Div A</span>
</div>
<div class="divB">
  <span>Div B</span>
</div>
<div class="divC">
  <span>Div C</span>
</div>