[css] 2021, this is the latest clearfix setting!

[css] this is the latest clearfix setting! css

clearfix is often used as a method to remove float wrapping, but at one time it had to be compatible with many older browsers, and the way it was written was often complicated.
However, since it is no longer necessary to support older versions of Internet Explorer (IE) and the standards of browsers other than IE are not as different as they used to be, the clearfix setting is changing to a simpler and more practical way of writing.
This time, for those of you who are wondering how to write clearfixes that match the times, I will suggest what I think is the latest version! If you are wondering how to write clearfix, this is the latest version!

For more information about float wrapping, please check the article here.

[css] How to remove wrapping with float "clear" and "clearfix"
Float" is often used to align elements horizontally. Have you ever had a proble...

Browser support range

Before I start writing the actual clearfix, I would like to tell you what I think is the minimum range of browser versions that should be supported. If you have a client, you may need to adapt to their needs, but I think that the following is enough to support the browser version, and I try to suggest such.

Google Chrome、Firefox、Safari、Opera、Microsoft Edge Latest version
IE11 or later

How to write clearfix

Change the pseudo-elements :before and :after to block elements respectively, add clear: both; and change .clearfix to display: block;.
This is all you need to do to make it fully compatible with the browsers listed above. The downside is that you can’t use the pseudo-elements :before, :after, but it’s much simpler and easier to use than the old way.
You can use the clearfix setting as it is, so please use it.

You can read about how to use “clearfix” and how to remove wrapping with floats here!

[css] How to remove wrapping with float "clear" and "clearfix"
Float" is often used to align elements horizontally. Have you ever had a proble...