Clearing float elements by creating a new block formatting context

This article discusses the situation when an element that creates a new block formatting context has descendants that have a float property value other than none. In most articles on this topic, the behavior of elements in such cases is proposed to be taken for granted, so this article focuses on the rationale for the browser to interpret the provisions of the W3C specification.

Task

There is a container element in which there is an element with the value of the float property set to left. For clarity, the container has borders and background.


jsFiddle

As you can see from the example, the container collapses - its calculated height is set to zero. This case is often found in the layout, everyone is used to it and it is difficult to find a layout designer who has not encountered such a situation.
')

Why it happens?

The fact is that if the value of the height property of an unsubstituted block element (ie, the container in our example) is set to auto (and this value is set by default), then its height is determined based on the height of the descendant elements; in this case, only elements participating in the normal flow are taken into account. Thus, float elements and absolutely positioned elements are ignored when determining the height of the container ( reference to specification ).

Decision

There are several options for solving this problem.

The most obvious is to place a block with the corresponding value of the clear property after the float element. In this case, the block is below the float element by the definition of the clear property, and the container calculates the height based on the position of this element.

A more advanced (and, perhaps, the best of all) solution is to introduce the clearfix class, popularized by not using Twitter Bootstrap anymore and allowing you to achieve the same effect without violating the semantics of the document.
But there is another solution. It is to set the container to overflow: hidden.


jsFiddle

In fact, everything falls into place, the container takes the height of the inner element, but how does it work?

Explanation

Before we consider the mechanism of this phenomenon, we note that not only overflow: hidden solves the problem. The container will take the height of the float element, if it is set to an absolute position, set display: inline-block and in some other cases. What really happens?

The fact is that in all these cases a new block formatting context is created inside the container.
A block formatting context is like a box in which things lie - if another box is next to it, then the things from the first cannot affect the state of things in the second.



If you go back to the layout, then the block formatting context — the environment in which the blocks are placed in the usual order for the blocks — is top to bottom, the distance between them is determined by margins, the margins of adjacent blocks collapse ( reference to specification ). Elements from different block contexts of formatting can not affect the position of each other on the page.

If you first come across the concept of block formatting context, try solving the following practical problem: jsFiddle .

So, with the concept of context figured out. Now let's answer the next question - why, when creating a block formatting context, are float elements taken into account to determine the height of the container?

The fact is that this case is separately specified in the specification. For blocks that create a new block formatting context and have height: auto (recall once again that this value is set by default), the following rule applies ( reference to specification ):

If an element has float descendants whose lower edge of indents is below the lower line of this element, the height of this element increases to accommodate this edge. Only float elements that are in this block formatting context are involved in this — for example, float elements within absolutely positioned descendants or other float descendants are not counted.

In short, when determining the height of an element that creates a new block formatting context, the height of the directly child float elements is taken into account (and of course, as usual, the elements participating in the normal stream).

When a new block formatting context is created

This chapter lists the cases in which a new formatting context is created. In the context of the problems of this article, this list is a list of cases in which the block will adjust in height to the child float elements. So, a block formatting context is created:

• float elements;
• absolutely positioned elements;
• fixed elements (since position: fixed is a type of absolute positioning, reference to specification );
• elements that are a block container inside but have a different structure outside (such as inline-block, table-cell, table-caption);
• blocks with overflow set to any value except visible;
• element fieldset (in most browsers).

Total

The article discusses the issue of adjusting the height of the element that creates a new block formatting context to the size of the child float elements. This question is only part of the way the block formatting context works, but I hope that this article has helped you understand the new aspects of the CSS specification.
Thanks for attention.