Is CSS float deprecated?

An interesting question has emerged in work recently: Should we also use the CSS float attribute after having CSS Grid and Flexbox?

Short answer

No! Or, in most cases, it is not used. Nowadays, I will only use it for text-surrounding pictures and will avoid using it entirely for layouts.

Longer, more annoying answers

Before Flexbox and Grid emerge, we have to use the CSS float property to create grids and layouts. In fact, this is the first attribute I came into contact with when learning web design. On a hot summer afternoon, I opened a book called "Designing with Web Standards" by Jeffrey Zeldman and moved a tiny red div with float: right . This is simply magic! There is a huge power in the float.

Moving elements on the screen is so simple that I now wonder how many designers have fallen in love with web design just because of the simplicity of this mobile element.

However, building complex layouts with float has always been a stopgap solution: it is actually designed to just keep text around the picture.

 <code>img { width: 150px; float: left; }</code>

The float problem begins when we try to build large layouts and magazine-style grids. But then we had no choice but to do so.

One problem with the float attribute is that you have to wrap the floating element with something called clearfix, which looks like this:

<code><div>
  <div>Column</div>
  <div>Column</div>
  <div>Column</div>
</div></code>

<code>clearfix:after { content: ""; display: table; clear: both; }</code>

Jay Hoffman has described the clearfix hack before:

Clearfix, for those who don't know, this is a CSS hack, which solves a persistent bug that occurs when two floating elements are stacked side by side. When elements are aligned this way, the height of the parent container ends up becoming 0, which can easily break the layout. You might just want to place the sidebar to the left of the main content block, but the result is that the two elements overlap and collapse each other. More complicated is that this bug is inconsistent in different browsers. clearfix was invented to solve all these problems.

After that, the situation began to change slowly. Back in 2017, Rachel Andrew explained how the browser can handle clearfix problems without any hack at all. We only need the following CSS to achieve the same fix:

 <code>.container { display: flow-root; }</code>

Strangely, I didn't know the existence of flow-root value until three minutes before I typed. But this may prove what I'm going to say next: With CSS Grid and Flexbox, we don't actually need floats at all. This property was originally designed with only one purpose: to allow text to surround the picture. But now, with Grid and Flexbox, we have powerful features that can do the real layout.

Go back to the discussion I had at work. Some people say we should go back to the codebase and delete all instances of float because it is very old code and we can easily replace it with Flexbox or Grid. But here, I want to say, "Wait!" I don't think retaining the float attribute in some places in the code base does much damage - it's not the radioactive code that will cause the problem.

So, should we use CSS float for any other purpose besides having the text wrap around the image? No. But should we clear all CSS float declarations on the network right away, because it is not pure and not the "correct" approach? Nor either.

The beauty of the network is that old code should not break things. Just ask Chris. A website that doesn't use the most dazzling CSS attributes or the coolest tricks is not useless or bad. We just replaced float with better alternatives. I think this is a good lesson that these CSS properties may be there forever because they still have applicable use cases in modern web design.

This is very good.

The above is the detailed content of Is CSS float deprecated?. For more information, please follow other related articles on the PHP Chinese website!