What does CSS float mean? CSS floating principle and CSS clear floating method (with code)

What does CSS float mean? The so-called CSS floats are floating elements out of the normal flow of the document, according to floatThe value moves left or right until its outer boundary touches the inner boundary of the parent element or the outer boundary of another floating element. Because the float box is not in the normal flow of the document, the block-level elements in the document's normal stream behave as if the floating element does not exist. Next, this article tells you about CSS floating principle and CSS to clear the floating method.

Floating effects

Floating elements can cause parent elements to collapse

When the element is set to float, the element is out of the document stream, and the parent element does not set the height, causing the collapse.

<div class= "Super" >    <div class= "Sub" ></div></div>.super{    border:1px solid red;}. sub{  Float:left;  Background:green;  border:1px solid yellow;  width:100px;  height:100px;}

The left (right) outer boundary of a floating element cannot exceed the left (right) inner boundary of its parent element.

The outer boundary (margin) of a floating element does not exceed the inner bounds of the parent element (padding) without setting the margin to a negative value and the parent element remaining space.

<div class= "Super" >    <div class= "sub1" ></div>    <div class= "Sub2" ></div></ div>. super{    margin:0 Auto;    padding:10px;    border:1px solid yellow;     width:300px;}. super:after{  Clear:both;  Content: ";  Display:block;}. sub1{  Float:left;  Background:pink;  border:1px solid Green;  width:100px;  height:100px;}. sub2{  float:right;  Background:pink;  border:1px solid Green;  width:100px;  height:100px;}

Floating elements do not overlap.

This is also margin true in situations where negative values and the parent element have no remaining space.
This is my understanding of Rule II and rule three in the floating section of the CSS Authoritative guide, and the following is the original text.

2. The left (or right) outer edge of a floated element must is to the right (or left) of the right (left) outer edge of a l Eft-floating (or right-floating) element, occurs earlier in the document ' s source, unless the top of the later element is below the bottom of the former.

Youdao translation:

2. The left (or right) outer edge of the floating element must be on the left (left) side of the right (left) floating (or right floating) element, which appears earlier in the source code of the document, unless the top of the following element is below

3.The right outer edge of a left-floating element is not being to the right of the left outer edge of any right-floating ele ment to it right. The left outer edge of a right-floating element is not being to the left of the right outer edge of any left-floating Eleme NT to it left.

Youdao translation:

3. The right edge of the left floating element may not be the right side of the left outer edge of the floating element. The left outer edge of a right floating element may not be left on the right edge of any left floating element on the left.

These two rules are the basis for ensuring that two floating elements do not overlap.

The

behaves as if a floating element is leaning to the left (right), there is already a floating element on the left (right) side of the element, they do not overlap, and the latter is arranged next to the first. If the total width of the floating elements exceeds the width of the parent element, the floating elements do not overlap, and in the order of the HTML structure, the floating elements that do not fit in a row begin to move to the next row.

<div class= "Super Super1" >    <div class= "sub1" ></div> haha haha ha ha ha ha ha ha ha haha hahaha haha haha haha ha hahaha    < Div class= "sub2" ></div></div><div class= "Super Super2" >    <div class= "Sub1" >float: left</div>    <div class= "Sub2" >float:right</div></div>.super {    float:left;    margin:10px;    padding:10px;    BORDER:1PX solid blue;    width:300px;}. Super1. sub1{    float:left;    Background:pink;    border:1px solid red;    width:100px;    height:100px;}. Super1. sub2{    float:left;    Background:pink;    border:1px solid red;    width:100px;    height:100px;}. Super2. sub1{    float:left;    Background:pink;    border:1px solid red;    width:200px;    height:100px;}. Super2. sub2{    float:right;    Background:pink;    border:1px solid red;    width:200px;    height:100px;}

The effect is as follows:

The top of a floating element cannot be higher than the top of its parent element, and cannot be higher than the top of a floating element that appears before it.

This rule is also established in cases where the margin-top is not negative.

The top of the parent element restricts floating elements, preventing it from floating to the top of the page.
For the example on the right, sub2 under Sub1, sub1 to the right of the space is not enough to accommodate sub2, but enough to accommodate SUB3, and Sub3 did not float, it is because his top can not exceed the top of SUB2, This example is enough to confirm that the top of the floating element cannot be higher than the top of the floating element.

<div class= "Super" >    <div class= "Sub sub0" ></div></div><div class= "Super" >    <div class= "Sub sub1" >sub1</div>    <div class= "Sub sub2" >sub2</div>    <div class= " Sub Sub3 ">sub3</div></div>.super {    float:left;    margin:10px;    padding:10px;    BORDER:1PX solid blue;    width:320px;}. Sub {    background:pink;    border:1px solid red;    height:100px;}. sub0 {    float:left;    width:100px;}. sub1 {    float:left;    width:200px;}. sub2 {    float:left;    width:150px;}. sub3{    float:right;    width:50px;}

The effect is as follows:

Clear floating

The purpose of clearing floats is to solve the problem of height collapse and to open up the floating parent element. Usually there are several ways to do this:

Add an empty label with style Clear:both

<p style= "Clear:both;" ></p>

Put the above tag at the end of the parent element of the floating element.

Principle: Clear adds a clear area (clearance) above the margin-top of the element, which adds extra space on the margin-top of the element and does not allow floating elements to enter the area.

Advantages: Convenient, strong compatibility.

Disadvantage: More than a lot of meaningless labels, increase maintenance costs, and a little attention to the middle of a lot of space will produce a blank height.

Parent element Set Float

Pros: Simple, less code, good browser support.
Disadvantage: The effects of floating are still present after the parent uses float, and it is not possible for the parent to use floating at the top level.

Using the overflow, zoom property

. fix{    Overflow:hidden (auto, scroll);     Zoom:1;}

Advantages: Simple code, good compatibility, do not produce redundant labels.

Disadvantage: Setting the contents of the Fix class's label will be hidden (or produce a scrollbar) when it is outside the label.

Parent element Set Float

Pros: Simple, less code, good browser support.
Disadvantage: The effects of floating are still present after the parent uses float, and it is not possible for the parent to use floating at the top level.

Parent element Settings Position

Principle: In position the case that the value is not relative or static , the BFC will be formed.

This is preferred when the parent element needs to be set position to fixed or absolute .

Pros: Simple, less code, good browser support.
Cons: Changes the parent element layout, affecting the overall layout.

Use: After

. fix:after{    Display:block;     Content: ";     Clear:both; }

The principle is similar to adding new tags and then setting clear:both, but using pseudo-class methods does not have redundant labels.

Advantages: Simple code, good compatibility, do not produce redundant labels.

In the above method, the first way to add an empty label style clear:both is not recommended, will increase the meaningless tag, the other set the parent element floating, change the parent element position, overflow method depending on the situation, if the parent element itself has this aspect of the style requirements, That would be appropriate, if not, to use the last pseudo-element: After is the most common way.