Introduction to the method of setting floating elements using CSS float attribute

A floating box can be moved left or right until its outer edge touches the border of the containing box or another floating box.

Because the float is not in the document's normal flow, blocks in the document's normal flow behave as if the float does not exist.

float effect display
Basic settings

Add 3 p color blocks to the web page normally:

HTML code:

<p class="p1">
    p1   
</p>
<p class="p2">
    p2   
</p>
<p class="p3">
    p3   
</p>

Simply set some sizes and colors:

CSS code:

.p1 {   
    width: 100px;   
    height: 100px;   
    background-color: cyan;   
}   
.p2 {   
    width: 100px;   
    height: 100px;   
    background-color: skyblue;   
}   
.p3 {   
    width: 100px;   
    height: 100px;   
    background-color: green;   
}

##The effect is as follows:

Under normal circumstances, the three ps are sorted from top to bottom

Next, let’s use the float attribute and set the value right

Add the float attribute to the p1 tag

.p1 {   
    width: 100px;   
    height: 100px;   
    background-color: cyan;   
    float: rightright;   
}

The effect is as follows:

We will find that p1 has run to the right side of the screen, which is the performance of letting it float to the right side.

Set float for all three p at the same time: left

.p1 {   
    width: 100px;   
    height: 100px;   
    background-color: cyan;   
    float: left;   
}   
.p2 {   
    width: 100px;   
    height: 100px;   
    background-color: skyblue;   
    float: left;   
}   
.p3 {   
    width: 100px;   
    height: 100px;   
    background-color: green;   
    float: left;   
}

The effect is as follows:

When we put After all three p's are set to float to the left, you can achieve this horizontal layout

Modify the CSS code (height of p1 and width of p2) as follows:

.p1 {   
    width: 100px;   
    height: 130px;   
    background-color: cyan;   
    float: left;   
}   
.p2 {   
    width: 300px;   
    height: 100px;   
    background-color: skyblue;   
    float: left;   
}   
.p3 {   
    width: 100px;   
    height: 100px;   
    background-color: green;   
    float: left;   
}

Effect display:

We will find that when p2 is wide enough and p3 cannot be placed in one row, p3 will automatically start layout from the second row. But because p1 is a little taller, p3 will be arranged from behind p1 instead of starting from the beginning

Use overflow to clear floats
Example:

.overflow-clear-float {overflow:hidden;}

or

overflow-clear-float {overflow:auto;}

When the overflow style value is non-visilbe, Block Formatting Contexts defined by the CSS 2.1 specification are actually created. The element that created it will have its internal element positions recalculated to obtain the exact height. In this way, the parent container also contains the height of the floating element. This term was too obscure and was changed to the term Root Flow in the CSS 3 draft. As the name suggests, it creates a new root layout flow. This layout flow is independent and does not affect its external elements. In fact, this feature is very similar to the hasLayout feature of early IE.

Note compatibility issues:
The concept of Block Formatting Contexts was proposed within the CSS 2.1 specification. Therefore, it is not supported in IE6/7. This is because previous IE versions only fully implemented the CSS 1 specification standard, and part of the CSS 2.0 specification. In IE 7, the hasLayout attribute can be triggered when the overflow value is non-visible. This also allows IE 7 to also make containers contain floating elements.

For more information on how to use the float attribute to set floating elements in CSS, please pay attention to the PHP Chinese website!