How can we improve the Microsoft Edge developer experience?

Implement CSS `display: flow-root` (modern clearfix)

`display: flow-root` is a modern way to force a block to be a formatting context that floated elements are contained in (aka clearfix).

From the spec [1]:

> The element generates a block container box, and lays out its contents using flow layout. It always establishes a new block formatting context for its contents.

Tab Atkins and Elika Etemad (fantasai) from CSSWG consider the feature stable enough to be implemented [2].

[1] https://drafts.csswg.org/css-display-3/#valdef-display-flow-root
[2] https://discourse.wicg.io/t/1835/6

1,977 votes
Vote
Sign in
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    Marat Tanalin | tanalin.com shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

    27 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      Signed in as (Sign out)
      Submitting...
      • Ilya Streltsyn commented  ·   ·  Flag as inappropriate

        The name of this issue might be slightly confusing because in Russian web dev community the word "clearfix" is often used as an umbrella term for all kinds of "containing floats" problem solutions, not only for the (in)famous clearing pseudo-element hack. It's true that nowadays we have layout mechanisms much better than floats (which never were meant to be used as layout mechanisms and were used as such only because of lack of alternatives).

        However, floats are still great for things they were intended for (like text and graphical insets flowed around by the main text, neither Flexbox nor Grid can reasonably do this), and having a standard way for containing them, as well as for containing child elements' margins, is still very useful, especially in the component world where different parts of the layout shouldn't affect each other (the CSS Containment spec explicitly requires `display:flow-root` for Layout containment).

        I believe that implementing this shouldn't be hard, given that it's basically the same behavior as the well-supported `column-count:1` does (and that IE had the similar behavior ages ago — the legendary hasLayout:)...

        ...but, yes, do display:contents first, please!

      • Bernard Skibinski commented  ·   ·  Flag as inappropriate

        I just want to bring to attention, that this feature would have been great, even just a year ago, but as of today, this is actually mostly deprecated.

        If you are still using floats for anything, you should really get to know flexbox (The only exception if you need to support IE9 (or lower?? i feel sorry for you))

        Anything you are building with floats, is a lot easier with flexbox.
        Disabling collapsing margins can also be done with display: flex.

        Really point your attention to flexbox/grid way of styling with the help of @support for some backwards compatibility rules, because floats and clearfixes are pretty much dead already.

        If you want to improve the future of CSS instead of the past: Put your vote in this issue: https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/10938981-implement-the-box-generation-keywords-from-css-dis?page=5&per_page=20

        It will enable us to use Grid layouts to it's full power, and even solve some other minor CSS annoyences. It will allow us to "ignore" boxes, so you would be able to do things like ul.menu > a.link instead of ul.menu > li.item > a.link (just a stupid example, ignoring list items, it can have some powerful implementations).
        for grid layouts it means you could take children from nested boxes, and put them in your main grid.

      • Patrick Dark commented  ·   ·  Flag as inappropriate

        |display: flow-root| is useful for more than containment of floats; it prevents margin-collapsing through an element's boundaries.

        That's useful if you have, say, a |main| element with no top or bottom margins that has a background and contains |section| elements with top and bottom margins. With |main { display: flow-root; }|, there's no need to worry about the section margins collapsing through the |main| element's upper and lower boundaries and creating unintended gaps before and after that |main| element (which will be noticeable because of the background in use).

        Current solutions involve things like |main > section:first-child { margin-top: 0; }| which is brittle or |main { display: table; width: 100%; }| which doesn't serve an obvious purpose. (Margins don't collapse through table boundaries.)

      • Andre commented  ·   ·  Flag as inappropriate

        This should be high priority for the Edge team, as it finally solves a very frequent problem we web developers face.

      • Chris commented  ·   ·  Flag as inappropriate

        It would be great to see this implemented, allowing developers to build true flexbox layouts without the need for hacks.

      ← Previous 1

      Feedback and Knowledge Base