It remains a part of the flow because text still wrap around float thus they are still considered a part of the flow unlike position:absolute elements that will no more affect the flow.
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 (in contrast to absolute positioning).ref
To answer your question, let's add the properties step by step.
Intitially we have this:
section {
border: 1px solid blue;
}
div {
margin: 5px;
width: 200px;
height: 50px;
}
.left {
/*float: left;*/
background: pink;
}
.left_second {
position:relative;
background: blue;
}
.right {
/*float: right;*/
background: cyan;
}
<section>
<div class="left">1</div>
<div class="left_second">2</div>
<div class="right">3</div>
</section>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
