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>

Now when I apply float:left to divA. It gets moved out of the flow and divB takes it's position. But I am not able to understand what is happening with the text inside divB. Why the text of B and C are collapsing/overlapping. I mean when A is floated, it should be moved out of the flow and the element below should take it's place but don't know why only divB is taking it's place but B's content is stil there as it is. Thanks for you help.

body {
  background: #eaeaed;
}
div{
  border : 2px solid #ff00ff;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.divA{
  background: yellow;
  float: left;
}
.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>

The B text appears to be overlapping with the C text because, strictly speaking, the B text is overflowing the box as a consequence of floating A. Content that's overflowing a box — even if that box has overflow: visible, as is the case for all three elements here — has no effect on content outside the box.

Answer 2

See Visual formatting model - Floats:

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.

So .divA overlaps .divB. But the line boxes in .divB shrink.

It's easier to see if you let .divB be wider than the float:

body {
  background: #eaeaed;
}
div {
  border: 2px solid #ff00ff;
  width: 200px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.divA {
  background: yellow;
  float: left;
  width: 100px;
  height: 80px;
}
.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>

However, in your case .divB has the same width as .divA. So the line box shrinks to 0. Therefore, .divB's text does not fit there, and wraps to the next line box. That line box will overflow .divB and overlap .divC because you used equal line-height and height.