The relationship between CSS floating and absolute positioning

People still have to learn to think. When I was a beginner of CSS, I always felt that floating was very similar to absolute positioning, because they were both able to get normal HTML elements out of the flow of elements.

Compared to the absolute positioning of the powerful function, the float is not completely out of the element flow, which will be said later.

So what is out of the flow of elements? To figure this out, you first need to understand what the element flow is. I understand that the element flow is where the HTML tag should appear on the page, such as the following code.

1 <Div>2     <Pclass= "P1">p1</P>3     <Pclass= "P2">p1</P>4     <Pclass= "P3">p3</P>5 </Div>

1 div>p{2 Line-height:20px;3}4 . P1{5 Background-color:Red;6}7 . P2{8 Background-color:Blue;9}Ten . P3{ One Background-color:Pink; A}

Page effects

Under normal circumstances P2 should be under the P1, P3 above. This is where the P2 is in the normal flow of elements. What happens if you add a left floating style to P2:

Magic Bar, P2 seems to run to the top of the P3, but is still located under P1, while P3 above the text is not in P2 below, this is the effect of the P2 half out of the flow of the element (why is semi-detached, because it just so that the element behind it is located below it, and does not affect its relationship with P1, At the same time P3 the above text will not appear below the P2)

Speaking of which, you may still be confused, in the end what is really out of the flow of elements. In fact, CSS is a very emotional language, some effects need to have a strong imagination to support to think of the pass.

For example, we mortals are like P1, p2, P3, who have not separated from the flow of elements, living on earth for generations, affected by gravity, constrained by many conditions, the second platoon behind the eldest, old three the smallest. Suddenly one day, the second made a pair of wings (floating), at any time to leave the place where he lived for generations (elemental flow) to the blue sky, but he is mortal, but conquered the blue sky, still can not escape the Earth's bondage fly out of the atmosphere. Moreover, his wings are man-made, the function of the birds is still weak, he can only occupy his brother on the head of the blue sky, can not change the position (only to the leftmost or the right), and if some of his brother also ' fly ' up, they will be in the same sky.

Do not know to understand no, this is the effect of semi-detached element flow, although enjoy the freedom of the blue sky, but still subject to many restrictions. Perhaps you will be curious, why P3 above the text will not be under the P2, this is not a bug, this is the original intention of floating design, floating was originally designed to achieve text wrapping effect was raised.

The following say Position:absolute, or just the P1, p2, p3, if the absolute positioning to P3 what will happen:

Similar to the floating effect, except that P2 is entirely on top of P3, which is P2 at the top of P1 and P3, except that he will appear on his own head by default.

In fact, this is also very good understanding, just the floating effect is P2 with the use of artificial wings to achieve, is a semi-detached element flow, this P2 directly immortal, directly flew out of the Earth (completely out of the element flow), completely control the sky above them, and through left, right, top, Bottom can control his position, where he really wants to go.

Immortals are also hierarchical, Buddhist speaking desire six days, from low to high are four days Wang Tian, forget days, night sky, pocket rate days, le days, he is free days. This corresponds exactly to the absolute positioning of the z-index, a layer of cover one layer, their own experience.

The relationship between CSS floating and absolute positioning