A brief introduction to the method of CSS floating

The horizontal direction of the element floats, meaning that the element can only move left and right without moving up or down.

A floating element moves as far as possible to the left or right until its outer edge touches the bounding rectangle of the containing box or another floating box.

Elements that follow the floating element will surround it.

Elements before the floating element will not be affected.

Body

A float is a state of semi-detached document flow, which is not completely out of the document flow like absolute positioning

Absolute positioning:

<p id= "P1" >
<p id= "P2" ></p>
<p>

At this time P1 did not set the height, although the height of 100px in the P2 set, but P2 is not open P1 height, because absolute positioning completely out of the document flow, P1 is completely not feel P2;

Floating: First case

<p id= "P1" >
<p id= "P2" ></p>
</p>

We set the left float in the P2, if you do not remove the impact of P2 floating in the P1, then you also can not open the height of P1, because P1 do not feel floating.

But when you clear the float, the P1 can feel the presence of the float (the equivalent of floating is now in the document flow) and the height will open up.

There are two ways to fix this.

Floating: The second case

<p> Psycho-epileptic madness </p>
<p id= "P2" ></p>

Because floating (P2) can feel the <p> here, so how to display it, that is, the elements before the floating element will not be affected.

Floating: The third case

<p id= "P2" ></p>
<p;> neuropathy </p>

<p> is not aware of the existence of floating (P2), then <p> will be covered by floating, but he is not completely covered.

We can see that the background of <p> is really covered, but the text content of <p> is not overwritten, which is also a weird place to float-floats do not overwrite text in the document stream, but other properties are overwritten.

Workaround

Set up a clear:left for <p>; Clear the effects of floating, so that <p> can feel the presence of (P2).

<p id= "P2" ></p>
<p;> neuropathy </p>

The above article on the CSS floating that little thing is to share the whole content of everyone, hope to give you a reference, but also hope that we support topic.alibabacloud.com.