A brief introduction to the method of CSS floating

The horizontal floating direction of the element means that the element can only move left and right but not up and down.

A floating element will try to move left or right until its outer edge touches the border of the containing box or another floating box.

Elements after the floated element will surround it.

Elements before the floated element will not be affected.

Text

Floating is a state that is semi-detached from the document flow. It is not completely detached from the document flow like absolute positioning

Absolute positioning:

At this time, p1 has no height set. Although the height is set to 100px in p2, p2 cannot support the height of p1 because the absolute positioning is completely out of the document flow. You can’t feel p2 at all;

Floating: The first situation

##

We set it in p2 Instead of floating to the left, if you do not clear the impact of the floating of p2 in p1, then you will not be able to increase the height of p1, because p1 cannot feel the floating.

But when you clear the floating , p1 will be able to feel the existence of the float (equivalent to the float now being in the document flow), and the height will be expanded.

There are two solutions here

##Floating: The second situation##

Crazy and eccentric

Because floating (p2) can feel the

here, so it can be displayed how it should be; that is, Elements before the floated element will not be affected.

Floating: The third situation

Psychosis

The existence of float (p2) cannot be felt, so

will be covered by float, but it is not completely covered.

We can find that the background of

is indeed covered, but the text content of

is not covered. This is also a weird thing about floating - floating will not cover the document flow Chinese This, but other properties will override it.

Solution

Set a clear:left; for

to clear the impact of floating so that

can feel it to the existence of (p2).

Psychosis and epilepsy

The above article briefly talks about CSS floating, which is all the content shared by the editor. I hope it can give you a reference, and I also hope that everyone will support the PHP Chinese website.

For more articles about the introduction of CSS floating methods, please pay attention to the PHP Chinese website!