CSS how to set floating elements using the Float property introduction

The 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 box is not in the normal flow of the document, the block in the normal flow of the document behaves as if the floating box does not exist.

Float Effect Show
Basic settings

Add 3 p-color blocks normally in your Web page:

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, 3 p are sorted from top to bottom

Below, let's use the next float property and set the value right

Add the Float property to the P1 label

. p1 {       width:100px;       height:100px;       Background-color:cyan;       Float:rightright;   }

The effect is as follows:

We'll find out that P1 ran to the right side of the screen, which is what makes it float to the right.

Also set float:left for 3 p

. 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:

This horizontal layout can be achieved when we set the 3 p to float to the left

Modify the CSS code (the height of the P1 and the width of the 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 Show:

We will find that when the P2 is wide enough to fit P3 in a row, P3 automatically starts the layout from the second row. But because of the height of the P1 more, so P3 will be from the back of the P1, and will not start from scratch

Use overflow to clear floating
Examples:

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

Or

overflow-clear-float {Overflow:auto;}

When the

Overflow style value is non-visilbe, it is actually creating a Block formatting contexts that is defined by the CSS 2.1 specification. Creates its element, recalculates its inner element position, and obtains the exact height. This way, the parent container also contains the height of the floating element. This noun is too obscure to be changed into the noun root flow in the CSS 3 draft, as the name implies, creates a new root layout stream, which is independent and does not affect its external elements. In fact, this feature is very similar to the haslayout characteristics of early IE.
Note compatibility issues:
The Block formatting contexts concept is presented within the CSS 2.1 specification. Therefore, IE6/7 is not supported, because the previous version of IE only fully implements the CSS 1 specification, as well as part of the CSS 2.0 specification. In IE 7, when the overflow value is non-visible, the Haslayout feature can be triggered. This also allows IE 7 to make the container contain floating elements as well.