Divide and conquer - float, position and display

Let's talk about the well-known property of float, the equally well-known position and their neighbor - display.

As you know, in css there is the concept of "positioning scheme". There are three types of these positioning schemes - normal flow, floats and absolute positioning.

Now you need to enter some terms before you write what I want to convey.
')

The document is our page.
The document tree is the structure we described using html in the document.

For each element in the document tree, a so-called box is generated. Let's call it a container , in my opinion it reflects its meaning quite accurately.

It is also necessary to take into account that each element generates several descendant containers for which the container is containing (if it is generated by a block element).

The descendant containers are located relative to the containing container, but are not limited to them, which can cause overflow.

Of course, everything is a bit more complicated, although we may not go deep into the specification jungle. I will note only that there are different types of containers, but we will leave the types of containers for later.

The container is located in accordance with one of the positioning schemes:

1. Normal flow (normal flow, further flow ), which includes block formatting, inline formatting and relative positioning.
2. Floats . In this case, the container is initially positioned in accordance with the flow, and then shifted to the right or left as possible.
3. Absolute positioning . With this approach, the container is completely withdrawn from the flow (i.e. it has no effect on adjacent containers) and is located relative to the containing container.

The choice of positioning scheme is carried out using the properties float and position.

What is the display property responsible for? It is responsible for the type of the container (and sometimes also the child container) that will be generated by the element.

These three properties (postition, float, display) interact as follows:

1. If display is none, then float and position should be ignored. In this case, the element does not generate a container.
2. If position is absolute or fixed (the subspecies absolute), then display is set to block, and float is set to none (thus, the specified position cancels float). The location of the block in this case is described by the properties top, right, bottom, left and the containing container.
3. If float is not equal to none, then display is set to block and the container pops up.
4. Otherwise, the display property is used, in the form in which it was defined.

Now the most important thing is that what follows from the interaction of properties and everyone should know, but many forget:

In the case of the absolute location of the container (position is absolute or fixed), the display property is set to block, and float to none, regardless of what someone wrote in css.

In the case of the location of the container as a float (float is not equal to none), the display property is set to block, regardless of what someone wrote in css.

References:
www.w3.org/TR/REC-CSS2/visuren.html
www.w3.org/TR/REC-CSS2/visudet.html

ps. I also want to thank my friend from the Webmascon forum, who encouraged me to write this article.