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:

Copy code

The code is as follows:

<img src="http://lorempixum.com/200/200/" />
<p>Lorem ipsum...</p>

They appear on a new line:

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

Copy code

The code is as follows:

img
{
float: right;
margin: 20px;
}

At this point, we get right alignment:

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:

Copy code

The code is as follows:

p
{
margin: 20px;
}

In this way, it will be correct:

Copy code

The code is as follows:

img
{
margin: 20px;
}

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:

Copy code

The code is as follows:

p
{
border: solid 1px black;
}

The results may surprise you:

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

Copy code

The code is as follows:

img
{
float: right;
margin: 20px;
}
p
{
float: left;
width: 220px;
margin: 20px;
}

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:

Copy code

The code is as follows:

By default, each li item will take up one line of its own. If we put every "float: left", the image will line up with a line break:

Copy code

The code is as follows:

li
{
float: left;
margin: 4px;
}

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

Copy code

The code is as follows:

li
{
display: inline;
}

Now let's align it vertically:

Copy code

The code is as follows:

img
{
vertical-align: top;
}

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.

Copy code

The code is as follows:

If we want them to be in the opposite order, we just need to use "float: right:" instead of "float: left". In HTML, we don't change the order of elements as shown in the code above: We use CSS to operate

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:

Copy code

The code is as follows:

ul li:nth-child(2)
{
clear: left;
}

Here is what we get:

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:

Copy code

The code is as follows:

p
{
clear: both;
}

The solution to our problem is:

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:

Copy code

The code is as follows:

ul
{
background: gray;
}

But if we add "float: left" from the list, the background disappears completely:
CSS的float例如20

If we set the height to UL first:

Copy code

The code is as follows:

ul
{
height: 300px;
}

It doesn't solve the problem, because the size of the background is defined. The class "clearfix", which will be applied to the 'DIV' elements on the same level as the UL, will help us.

Copy code

The code is as follows:

.clearfix
{
clear: both;
}

There is another solution, using "overflow":

Copy code

The code is as follows:

ul
{
overflow:auto;
}

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.

<<: Three common ways to embed CSS in HTML documents

>>: JS ES new features: Introduction to extension operators