Alternative to .clearfix

.clearfix - which is so fond of the majority of web designers, its use is motivated by simplicity and the lack of other ways of working with float blocks. I want to bring to your attention another way - no less effective and no more complicated. Although out of habit, many will say that .clearfix stuck - and everything works, but its use is not always justified, and sometimes impossible, but somehow you need to adjust the pairing of blocks, which sometimes causes difficulties and increases the duration of the layout, and often debug or adding new elements to the environment.

To begin with, consider what happens to the elements and the parent element when the float: right and left property is added to them. Consider a small example:

<!--  1 -  --> <style> ul { padding: 20px; margin: 20px; } li { float: left; list-style: none; margin-left: 5px; border: 1px solid red; } </style> <ul> <li></li> <li></li> <li></li> </ul> <p>- </p> 

In the example, LIs have the property float: left; and, as one would expect, they line up one after the other and “Some text” clings next. Well, this is the classic float behavior. But let's look at the parent, because we still have UL: where did he go? We did not set float to it, and by default it is a block element, why is there no transfer after it?

And the following happened: to display float elements on the page, the browser seems to be "pulling them out of the general flow", putting it in the right place, which results in a flow around text and other elements. The clear property was entered to turn off the flow to turn it off on the right side of the selected block.

What happens if the parent block is set to clear: both; ? Absolutely nothing, because, as I noted earlier, we did not set float to the parent and, accordingly, nothing flows around it, as if it were not at all, its contents were "pulled out of the stream."

Let's see how to deal with this .clearfix :

 <!--  2 -   .clearfix --> <style> .clearfix:after { content: ""; display: table; clear: both; } ul { padding: 20px; margin: 20px; } li { float: left; list-style: none; margin-left: 5px; border: 1px solid red; } </style> <ul class="clearfix"> <li></li> <li></li> <li></li> </ul> <p>- </p> 

With the task .clearfix handled. How does he do it? It adds after the selected element a pseudo-element that goes around all the float elements located below. Below it is precisely because the parent element in the stream is empty, it is almost nonexistent, and therefore : after puts the element physically at the very beginning, and the browser has to figure out when all the elements will have to float to stop.

And here is the option without using .clearfix :

 <!--  3 -   .clearfix --> <style> ul { padding: 20px; margin: 20px; display: inline-block; } li { float: left; list-style: none; margin-left: 5px; border: 1px solid red; } </style> <ul class="clearfix"> <li></li> <li></li> <li></li> </ul> <p>- </p> 

Display property : inline-block; for the parent element. The result is the same, the only difference is that .clearfix leaves the parent element as a block element, or as it was previously defined. How to use it - decide for yourself. And for classic solutions, these methods are almost equivalent.

But if the parent element itself (and the elements inside it) float, and other blocks need to be placed relative to it, a situation may arise when .clearfix cannot be used. The parent element will occupy 0 size (the contents and he himself "pulled out of the stream"). And in order to position other elements in his environment, one will need to either prescribe a fixed height (and it may be non-permanent), or “play” with position: absolute; (which is also not always possible to foresee the inconsistency of content). In some cases, by adding additional content to such " nodes " on the site, it may be necessary to revise the whole concept of typesetting and override the entire " node ".

Using the display property will make it easier to diagnose the layout with development tools (firebug or other browsers built into browsers), precisely when .clearfix cannot be applied. After all, if you do not do this operation, then the parent element cannot be found by the inspector (if he does not have indents), and no place will be allocated for its content when rendering the page (this is clearly seen in Example 1 when inspecting). display: inline-block; just help to avoid these problems.

Layout options are available here.

Let's look at this option .
In clearfix, the external indent (margin), which is registered for UL, did not enter the div.box parent, and I took everything inline-block as indentation in place.

And in order for the inline-block width to become like a block we add width: calc (100% - 80px) - do not forget that external and internal indents should be excluded from the width.

Total: at your disposal - more than one way to solve this problem. Well, when there is a choice, use on health!