A brief analysis of the usage of HTML suspended float

Author：Eve Cole Update Time：2025-04-25 21:16:01

Some usages of float

Left suspension: float:left;

Right suspension: float:right;

Usage of float

The use of float is quite wide. Here I briefly introduce the common usages in the collection:

Before I get into float, I will set some inline-block properties. The block attributes are combined with the div inlay to complete the page layout. Then I get into the floating attribute, which makes the elements float much easier. There is no distinction between block-level elements, inline elements, or inline-blocks in the floating. The float will also automatically type as the size of the parent element width changes, eg. Directly adjust the viewing window and squeeze the elements into the next line.
In addition, as far as the SEO optimization I just learned about, browser analysis is from top to bottom. Therefore, important content is often written in the front and some unimportant or advertisements are written in the back. However, I want users to pay attention to the advertisements. Therefore, the main content is arranged in the center, and the advertisements are suspended left and right. I believe that friends who often browse the web pages have also noticed this point. Let’s talk about some of the writing and effects of the suspension. Let’s talk about some of the writing and effects of the suspension.

If the child element is suspended, it will cause the parent element to collapse at a height. This part involves clearing the suspension. The next chapter will mention the explanation of clearing the suspension.

So back to the point,

The first phenomenon float=inline-block

The suspension will be the style of 4 blocks becoming inline block mode: as shown in the figure below

 <style> div{ width:200px; height:200px; background-color: pink; border:1px solid black; float:left; } </style>

 <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>

The second phenomenon:

As shown in the figure below, since the first one is suspended, the second block element will be presented below the first one.

However, the latter element will not cross over to the previous element, such as the fourth block element, but the third one will not be suspended. The fourth season block element remains in its original position.

 <style> .first-one{ float:left; background-color:green; } .second-one{ background-color:purple; } .third-one{ background-color:blue; } .fourth-one{ float:left; background-color:grey; } div{ width:200px; height:200px; background-color: pink; border:1px solid black; font-size:30px; } </style>

 <body> <div class= first-one></div> <div class= second-one></div> <div class= third-one></div> <div class= fourth-one></div> <div class= fourth-one></div></body>

The third phenomenon:

If all elements float and the remaining width of the parent element is not enough to support the arrangement of the child elements in that row, then it will be connected to the upper level

This article is reproduced from: https://segmentfault.com/a/1190000022669455

Summarize

This is the end of this article about a brief analysis of the usage of HTML floating float. For more related html floating float content, please search for previous articles from Wulin.com or continue to browse the related articles below. I hope everyone will support Wulin.com in the future!