Css float and clearance float, css float clearance

Css float and clearance float, css float clearance

Floating is a frequently used attribute during page layout writing. In many typographical la S, float is used. For example, the following areas are applied to float.

 

 

 

I had a hard time learning floating. Here I will share my summary of floating knowledge.

I. Floating Definition

Disconnects an element from the document stream and moves it in the specified direction (left or right) until its outer edge hits the border of the contained box or another floating box.

When talking about the document stream, what is the document stream? The Document Stream shows the location/space occupied by objects in the document during arrangement, the document flow does not occupy any position on the page.

Ii. Attributes

Float: left; float left

Float: right; float right

Iii. Floating

Below I will use this layout as an example to explain the floating. The div outside the css style gives a height, not to mention anything else.

 

　　　　

 

1. float on the left: left;

Give the three p labels float: left; attribute to see what the situation is. We all know that block-level labels occupy a row by default, so they are displayed in a row, but we can see that they are arranged in order.

 

 

2. float on the right: right;

Similarly, we give the p label in the box a float: right; attribute. They will route to the right in order.

3. this time, we will only float the second p to see what will happen. At this time, you will find that 3 is missing, but he is actually below 2, I will give 3 A width. 3 is under 2.

 

4. 3 float

He will not change, because floating will only affect the elements behind him. If the above elements are not floating, he will not go up.

 

5. Reduce the div width and p floating

If the parent element is too narrow to accommodate all floating elements, a line break is displayed.

 

6. Special floating situations

The line feed element is used as the benchmark. If the height of a floating element is greater than that of a line feed, the line feed element will be "stuck" when it is changed ". The initial style is left.

 

 

7. The p label is floating due to the influence of floating on Text

The floating box only occupies its own position, so that the text can be displayed around the floating box.

　　　　

 

 

4. There are many features after floating

1. Block-level elements can be displayed horizontally

2. You can set the width and height of an element in the row.

3. When the width and height of the element are not set, the width of the content is extended.

4. Support for margin

5. Exit Document Stream

6. upgrade to a half-level

Problem: margin: auto;

5. Clear floating

As mentioned above, I gave the external div A height. Here we don't give it a height, so let the p inside float to see what will happen.

Not Floating

 

After floating

 

We will find that the child element floating will cause the height of the parent box to collapse, so if the layout continues below, the page layout will be disordered (the Middle Yellow box is the div under the nav) if you want to continue the layout, you need to clear the floating. Here are several methods to clear the floating.

The label and the image are as follows:

 

 

Parent-level practices

Give the clear: both attribute to the nav and it will be displayed normally.

Disadvantage: It just makes the subsequent elements display normally and does not support the height of the box.

 

2. Parent level to height

Box to the height, can be displayed normally.

Disadvantage: It is generally because the element content is not highly scalable.

 

3. Parent element display: inline-block;

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

Disadvantage: the parent-level box margin: auto; is invalid. There is a gap between the upper part and the lower Yellow part.

 

4. Parent-level overflow: hidden;

Can be displayed normally

Disadvantage: The width must be matched.

 

Child Element

1. Add another element to the end of the floating element. Add a clear attribute

Can be displayed normally

Disadvantage: add an empty element randomly, which does not comply with the code specifications.

 

 

2. Congratulations on seeing this. Here I will introduce one of the most popular methods for clearing floating.

After the pseudo elements are cleared and added to the box, they can still be displayed normally without being shown.

Clearfix: after {content: "; display: block; clear: both ;}

 

The above are my opinions and conclusions on floating and clearing the floating knowledge. If you have any shortcomings, I hope you can correct them. Thank you!