CSS float property diagram float property details

Using the CSS float property correctly can become a daunting task with so much to cover and so many browser compatibility issues. Its positioning involves not only the containing block, but also line boxes, block boxes, and inline boxes. This article contains illustrative examples of embodiments of applying the float property, as well as some errors.

What is a “float”?

Certain elements in CSS are block elements, for example, if you put two paragraph tags as P, then they will be placed on two lines. Each element occupies one line. If you want to display it in one line, you can use the inline attribute to display it on the page.

Another effective way to change the wrapping properties of page elements is to use float. A typical example is to use "float" to align an image to the left or right. Below is a simple HTML code with an image and a paragraph:

Let's add some CSS code to the image to change its appearance, hehe:

If there is more text, the paragraph will continue to wrap around the image:

For example, we need to make the image and text indent 20 pixels. If you write code like this, the following code is wrong and will not work:

Then you may ask why the 20-pixel indent of the p paragraph written above does not work and is not effective? To find out, let's add a skeleton code:

It turns out that without the borders (it has no effect on them here, it's just to make you understand), the image is inside the paragraph! Therefore, the margin property has no effect in the first case. To solve this problem, you can use float:left for paragraph p and set an absolute width: The effect after setting is as follows

Strange rule "float"

Now, let's move on to more complex ways of using the "float" rule, transforming float objects. It may be necessary when creating thumbnails. For example:

But what if the images are different heights?

If we add the display attribute to the elements in the list, the effect will be better, as shown in the following figure

Now let's align it vertically:

It should be remembered that if this is the case with higher images, all other images will surround the previous one, for example:

Another example is changing the order of elements. We have a list of items.

With the help of "float", it is convenient to group items on the page, but we face a big problem: the following content (text or block) will also change. For example, we have a set of images:

The following text starts flowing around the entire block:

To avoid this, you have to use the "clear" property. If we apply this to the second image:

In this case, the remaining images continue to inherit "float: left". Correspondingly, the text will appear distorted:

We need to use clear:both for the paragraphs:

Now, let's imagine that, in the previous example, we need to set the background to the gallery. If the item does not float, then we will have this:

If we set the height to UL first:

Nine rules for float-items:

A floated item cannot extend beyond the edges of its parent container. The left margin edge of a left-floated box must not appear to the left of the left edge of its containing block. : : : : : : : : : : : : : : :

It can be seen that the rules of floating are very confusing, but from these rules you can easily find that the purpose of floating is to place it as close to the top or left/right as possible without overflowing the containing block, but not higher than the top of the block box, floating box and line box generated in front of it.