Divide and conquer - float, position and display

Let's talk about the well-known property of float, no less 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 introduce some terms before writing what I want to convey.


The document is our page.
A document tree is a structure that we described using html in a document.

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

It is also necessary to consider that each element generates several descendant containersfor which the container is containing (if generated by a block element).

Descendant containers are positioned relative to the containing container, but are not limited to it, which can cause overflow.

Of course, everything is a little more complicated, although we can not delve into the jungle of the specification. I only note that there are different types of containers, but let us leave the types of containers for later.

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

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

The positioning scheme is selected using the float and position properties.

What is the display property responsible for? It is responsible for the type of container (and sometimes also the descendant 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. However, the element will not generate a container.
2. If position is absolute or fixed (a subspecies of absolute), then display is set to block, and float is set to none (thus, the specified position cancels the float). The location of the block in this case is described by the properties top, right, bottom, left and the containing container.
3. If the float is not none, then display is set to block and the container pops up.
4. Otherwise, the display property is applied, in the form in which it was defined.

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

If the container is absolutely positioned (position is absolute or fixed), the display property is set to block, and the float is none, regardless of what anyone wrote in css.

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

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

ps. I also want to express my gratitude to a friend from the Webmaskon forum who encouraged me to write this article.