Possibly confusing note about floats, cleared items and grid

[schalkneethling]

MDN URL

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers

What specific section or headline is this issue about?

Fallback methods

What information was incorrect, unhelpful, or incomplete?

Just above the "Fallback method" heading there is this note:

Note: The clear property also has no effect once the cleared item becomes a grid item, so you could have a layout with a cleared footer, which is then turned into a Grid Layout.

I wonder if we actually need the note in this context? It has caused confusion for at least one learner:
https://discourse.mozilla.org/t/confused-about-a-note-in-supporting-older-browsers-article/95769

I thought we could reword it but, I now wonder if removing the note altogether is the better option. It is stated again just a couple of sentences later here https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers#fallback_methods

What did you expect to see?

No note about cleared items.

Do you have any supporting links, references, or citations?

https://discourse.mozilla.org/t/confused-about-a-note-in-supporting-older-browsers-article/95769

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/learn/css/css_layout/supporting_older_browsers
• MDN URL: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/learn/css/css_layout/supporting_older_browsers/index.md
• Last commit: 0160aac
• Document last modified: 2022-02-18T09:33:58.000Z

[Junaid-1993]

I think the context in which the article says " when cleared items become flex or grid items " is not making sense to me. Only floated items can become flex or grid items. Removing only that part will make it clear.

Thank you.

[wbamberg]

My reading of that note is this.

The main bit of that section is about how you can float some items, so they appear in a row. Then if you use grid as well, then in browsers that support grid, you'll get a grid layout, and in browser that don't, you'll get a floated layout. The key things that make this work are:

• browsers ignore CSS that they don't understand (so browsers that don't support grid will just ignore grid)
• grid tells browsers to ignore float (so browsers that do support grid will ignore the float)

Then the note says: by the way, the same thing works with clear: if you have an element with clear set, then you make that element a grid element, the browser will ignore clear. It briefly refers to an example:

you could have a layout with a cleared footer, which is then turned into a Grid Layout.

I think this means, you could have a page layout that uses floats for, say, sidebars, and then uses clear so it can have a footer all across the page. And then, if you want to use grid for the footer, you can do that, and the browser will then ignore the clear value.

So it's quite intentional that the note talks about clear.

Perhaps it might be clearer to adapt the example to include a "cleared footer" as well, and have the grid layout include the footer? It seems valuable to mention clear in this context.

[Junaid-1993]

Yes, there should be a code example for " cleared footer " as well. So that just reading the note will not be that confused.

Now I understand if any element is cleared using the clear property after floated elements. if we make that clear item a grid item by doing that the clear property will be ignored just like the float property if the grid is supported by that browser.

But when I make the cleared items a grid items without making floated items grid items. The cleared items are sitting next to floated items they are not going to the new line. Can you explain a bit?

Thank you.

[schalkneethling]

Perhaps it might be clearer to adapt the example to include a "cleared footer" as well, and have the grid layout include the footer? It seems valuable to mention clear in this context.

Yes! That would make this a lot more intuitive.