CSS float and clear float

In the process of writing a page layout, floating is a common attribute that is used by everyone. In a lot of typesetting layout is used in the floating, for example, the following places are applied to the floating.

When I learn to float, but I have to boil the brain, here I share my knowledge of floating this piece of the summary.

First, the definition of floating

Moves the element out of the document stream, moving in the specified direction (left or right) until its outer edge touches the bounding rectangle of the containing box or another floating box.

speaking of out-of-document flow to say what a document flow is, a document flow is a position/space in a document that can be used to display an object in an arrangement , and a detached document flow is not occupying a position in the page.

Second, the attribute

Float:left; left float

Float:right; right float

Third, the situation of floating

Here I use this layout as an example to explain the floating,CSS style outside the div gives a height, the other does not say much.

　　　　

1. left floating float:left;

to the inside of the three p tag float:left; property to see what the situation is. We all know that block-level labels will occupy one line by default, so they are shown in a row, but they will find that they are arranged in a row in order.

2. Right floating float:right;

the same we give the p tag in box a float:right; property. They will go to the right in order.

3. This time we'll just float the second p to see what happens, and then you'll notice that3 is gone, he's actually under 2 , and I'm giving 3 width of a wide point. Will find 3 below 2 .

4. give 3 a floating

He would have no change, because the float would only affect the elements behind him, and if the above element did not float, he would not go up

5. make the outer div width smaller,p floating

If the parent element is too narrow to hold all the floating elements, the floating elements that cannot fit will be displayed in a newline.

6. special conditions for floating

Based on the element of the newline, if there is a floating element whose height is greater than that of the wrapped element, then when the newline element is wrapped, it will be "stuck" by the higher element. The initial style is the left figure .

7. Effects of floating on text to p label float

The floating box will only occupy its own position so that the text can be displayed around the floating box

　　　　

Four, there are many characteristics after floating

1. block-level elements can be displayed horizontally

2. Inline elements can be set width and height

3. when the element is not set width and height, the width is widened to the content

4. support margin

5. out of document Flow

6. upgrade Half-level

problem : Margin:auto is not supported ;

Five, clear floating

1. Why do you want to clear float?

mentioned earlier I gave a height to the outside Div , here we do not give him height, let the inside of the p float to see what happens.

Not floating

After floating

we will find that the child element floats will cause the parent box to collapse, so that if you continue to layout below, it will cause the page layout to go out of order. (The yellow box is the div under the nav ) If you want to continue the layout to clear the float, here I introduce several ways to clear the float.

Label and look as follows two pictures

Parent's approach

1. Parent Level close to Brother Law

give nav a clear:both property, which can be found to display normally

Cons: Just let the back of the element normal display, and does not open the height of box

2. Parent-to-height

Box gives height and can be displayed normally.

Disadvantages: Generally, the content of the element is open and the expansion is not good.

3. parent element Display:inline-block;

Box to Display:inline-block; can be displayed normally

Disadvantage: Parent box Margin:auto; failure, you will find a gap between the upper and lower yellow.

4. Parent- Overflow:hidden;

can be displayed normally

Disadvantage: Need to fit width

Child elements

1. add an element after the end of the floating element to be added. Plus a clear Property

can be displayed normally

Cons: Randomly adding an empty element that does not conform to the code specification

2. congratulations on seeing this here, here I present one of the most mainstream methods of clearing floats today.

After pseudo element clear floating , add to box, still can display normally, do not send diagram.

Clearfix:after{content: ""; Display:block; Clear:both;}

Above is my knowledge and summary of floating and clear floating, if there are shortcomings, I hope you can correct me, thank you!

　　

CSS float and clear float