Home  >  Article  >  Web Front-end  >  A brief introduction to the method of CSS floating

A brief introduction to the method of CSS floating

高洛峰
高洛峰Original
2017-03-07 13:53:081692browse

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:



A brief introduction to the method of CSS floating

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

##



A brief introduction to the method of CSS floating

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

A brief introduction to the method of CSS floating

##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, A brief introduction to the method of CSS floatingElements 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. A brief introduction to the method of CSS floating

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. A brief introduction to the method of CSS floating

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn