It believe that the “cleared item(s)” and “floated item(s)” refer to the different elements. Let’s look at another example. We use a simple unordered list like this:
<ul class="card-list">
<li>Card 1</li>
<li>Card 2</li>
<li>Card 3</li>
<li>Card 4</li>
</ul>
<p>When the above list items are floated, I need to be cleared to be on my own line.</p>
with the following CSS:
.card-list {
list-style: none;
}
.card-list li {
float: left;
margin-right: 1rem;
}
p {
clear: left;
}
If you now change the above to the following:
.card-list {
list-style: none;
}
.card-list li {
float: left;
margin-right: 1rem;
}
p {
clear: left;
}
@supports (display: grid) {
.card-list {
display: grid;
gap: 1rem;
grid-template-columns: repeat(4, 1fr)
}
}
The list items inside card-list become grid items, so the float property does not affect the list items anymore. Also, technically, the clear: left; rule is no longer needed for the paragraph element. So you have two options here. First, you could leave the code as-is, and everything would work as expected.
You could also reset the clear property to its default value as follows:
@supports (display: grid) {
.card-list {
display: grid;
gap: 1rem;
grid-template-columns: repeat(4, 1fr)
}
/* this is not needed as the `clear` property will no longer have any effect */
p {
clear: initial; /* this will reset the `clear` attribute to `none` */
}
}
This will reset clear to its initial state of none, but there is no need for this, really. When floating the elements, you will also notice that we give each list item a right margin of 1rem. You should reset this to the browser default in the same way we reset the clear property or, simply to 0 which has the same result.
@supports (display: grid) {
.card-list {
display: grid;
gap: 1rem;
grid-template-columns: repeat(4, 1fr)
}
.card-list li {
margin-right: initial; /* this will reset the margin to `0` */
}
/* this is not needed as the `clear` property will no longer have any effect */
p {
clear: initial; /* this will reset the `clear` attribute to `none` */
}
}
See the Pen
Grid layout with float fallback by Schalk Neethling (@schalkneethling)
on CodePen.
)