What is float? How does css clear float?

This article introduces to you what is floating? The principle of css clearing floating (with code), which has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

I recently learned about CSS and found that floats need to be cleared when the height collapses. In order to understand the floating principle clearly, I searched a lot of information on the Internet and found that the writing was not very clear and they all had the same content. I I would like to share my understanding of the principle of clear floating here.

If you already know very wellWhat is floatingandThe effect of floatingYou can Jump directly to 3. How to clear floating (key points) reading

1. What is floating
First we need to know positioning
The position of the element in the page is positioning. Before solving the problem, let’s first understand several positioning methods.
1. Ordinary flow positioning static (default mode)
Ordinary flow positioning, Also known as document flow positioning, it is the default positioning method for page elements
Block-level elements on the page: arranged one by one from top to bottom
Inline elements on the page: one by one from left to right Arrangement
But how to display multiple block-level elements in one line?
Here comes the floating positioning
2, floating positioning float
The float attribute value is left/ right
This attribute was not originally used for layout, but for text wrapping. But later people found that it was good for layout, so they kept using it, and sometimes they even forgot to use it for text wrapping.
3. Relative positioning relative
The element will be offset by a certain distance relative to its original position. After changing the element position, the original space of the element will still be retained
Attribute: position
Value: relative
Use the offset attribute (top/right/bottom/left) to change the position
4. Absolute positioning absolute
If the element is set to absolute positioning If so, it will have the following characteristics
1. Out of the document flow - does not occupy page space
2. Fixed element position through offset attributes
3. Fixed position relative to the nearest positioned ancestor element
　4. If there is no positioned ancestor element, then the position is fixed relative to the original containing block (body, html)
Attribute: position
Value: absolute
In conjunction with offset Attributes (top/right/bottom/left) realize position fixation
5. Fixed positioning fixed
Fixed the element at a certain position on the page and will not occur with the scroll bar. Position movement
Attribute: position
Value: fixed
Used with the offset attribute (top/right/bottom/left) to achieve position fixation

2. The effect of floating
　What will happen after floating?
　1. Floating positioned elements will be excluded from the document flow - out of the document flow (do not occupy page space), and the remaining elements must come forward to fill in the space
　2. Floating elements will be docked at the parent element to the left or right, or docked to the edge of other floated elements (elements can only float in the current row)
　3. Floating elements are still located within the parent element
　4. Problems with floating element processing - solved Problems with displaying multiple block-level elements in one line
Note
1. When all the floated elements cannot be displayed in one line, the last one will wrap to another line
2. Once the element is floated, the width will Become adaptive (width is determined by the content)
3. Once the element floats, it will become a block-level element, especially for inline elements, which has the greatest impact
Block-level elements: allow the size to be modified
Inline elements: No size modification is allowed
4. Text, inline elements, and inline block elements are arranged in a surrounding manner. They will not be buried under floating elements and will cleverly avoid floating elements
What impact will there be after the float?
Since the floating element will break away from the document flow, it will not occupy the page space, so it will have a certain impact on the height of the parent element. If all the elements contained in an element are floating elements, then the height of the element will become 0 (height collapse)

3. How to clear floats (emphasis)

Solution and principle analysis

There are many methods on the Internet. I will only introduce one very easy-to-use method here, which is to set the class name. Principle of clearfix

: If all child elements float, the parent element will collapse, so add a non-floating element after all floating child elements to prop up the parent element. This element cannot be found and does not occupy space, so it cannot be allowed to There is content in it, but if there is content, it must be hidden.

.clearfix:after{content:'.';
　　　　　　　　　　clear:both;
　　　　　　　　　　display:block;
　　　　　　　　　　height:0;
　　　　　　　　　　overflow:hidden;
　　　　　　　　　　visibility:hidden;
　　　　　　　　}.clearfix:after{zoom：1；}/*解决IE的问题*/
//visibility：hidden；隐藏元素，但是位置留着
//display：none；隐藏元素，不占据空间，彻底隐藏
//after：伪对象选择符

Recommended related articles:

What does the transform-origin attribute in CSS do? The role of transform-origin attribute

Example explains how to use CSS language to create a lightning connection line

The above is the detailed content of What is float? How does css clear float?. For more information, please follow other related articles on the PHP Chinese website!