What is floating? CSS Clear Floating principle

This article introduces you to the content of what is floating? CSS clear floating principle (with code), there is a certain reference value, the need for friends can refer to, I hope to help you.

Recently learning CSS found a height collapse to clear the float, in order to understand the principle of floating, online to find a lot of information, found that are not written very clear, and are exactly the same content, I share my understanding of the clear floating principle,

If you already know what floating and floating effects are, you can jump directly to three. How to clear floating (focus) reading

I. What is floating
First we need to know the positioning
The position of the element in the page is positioning, before we solve the problem, we first understand the following several positioning methods
1, normal flow positioning static (default mode)
Normal flow positioning, also known as document flow positioning, is the default positioning method for page elements
Block-level elements in a page: Sort by top-to-bottom
Inline elements in a page: Sort by left-to-right way
But how do you make multiple block-level elements appear in one line?
This leads to floating positioning.
2. Float positioning float
Float Property value is Left/right
This property is not intended to be used for layout, but to be used for text wrapping, but later people found that the layout is also good, has been so used, and sometimes forget to use him to do text wrapping
3. Relative positioning relative
Element will offset a distance relative to its original position, and after changing the position of the element, the element's original space will remain
Property: Position
Value: Relative
With offset attribute (top/right/bottom/left) to achieve position change
4. Absolute positioning Absolute
If the element is set to absolute positioning, it will have the following characteristics
1. Out-of-document flow-does not occupy page space
2. Fixed element position by offset attribute
3. Fixed position relative to the nearest positioned ancestor element
4. If no ancestor element is positioned, then the position is fixed relative to the original containing block (body,html)
Property: Position
Value: Absolute
Fixed position with offset attribute (top/right/bottom/left)
5 fixed positioning
Positions the element at a location on the page and does not move with the scroll bar
Property: Position
Value: Fixed
Fixed position with offset attribute (top/right/bottom/left)

Two. Effects of floating
　　What happens after you float?
1. The floating positioning element is excluded from the document flow-out of the document Stream (does not occupy the page space), the rest of the elements to the forward complement
2. Floating elements are docked to the left or right of the parent element, or docked to the edges of other floating elements (the element can only float in the current row)
3. The floating element is still within the parent element
4, floating element processing problem-to solve the problem of multiple block-level elements displayed in one line
Attention
1, in a row, the last one will be wrapped when the floating element is not visible.
2. Once the element has floated, the width will become adaptive (width determined by content)
3, once the element is floating, then it will become a block-level element, especially in the inline elements, the biggest impact
Block-level elements: Allow size modification
Inline element: No modification of dimensions allowed
4, text, inline elements, inline block elements are arranged in a rounded way, is not to be pressed by the floating elements underneath, will cleverly avoid floating elements
What kind of impact will it have after the float?
Because the floating element is out of the document flow, it does not occupy the page space, so it has a certain effect on the height of the parent element. If an element contains elements that are all floating elements, the height of the element becomes 0 (height collapse)

Three. How to clear floating (focus)

Solution and Principle Analysis

There are many ways online, I only introduce a very useful method, set class named Clearfix

Principle: If the child elements are all floating, the parent element collapses, so after all the floating child elements add a non-floating element to prop up the parent element, this element cannot be found, does not occupy space, cannot let it have content, has the content to hide

. Clearfix:after{content: '. ';　　　　　　　　　　Clear:both;　　　　　　　　　　Display:block;　　　　　　　　　　height:0;　　　　　　　　　　Overflow:hidden;　　　　　　　　Visibility:hidden; }.clearfix:after{zoom:1;}/* solve the problem of IE *///visibility:hidden, hidden elements, but the location of//display:none, hidden elements, do not occupy space, completely hidden/ After: Pseudo-Object Selector