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.