[csswg-drafts] Proposal: a way to enable margin-collapse on BFC? or a new type of context like BFC but with margin-collapse? (#6752)

MichaelAllenWarner has just created a new issue for https://github.com/w3c/csswg-drafts:

== Proposal: a way to enable margin-collapse on BFC? or a new type of context like BFC but with margin-collapse? ==
It would be useful to either:
1. have the ability to enable [margin-collapse](https://www.w3.org/TR/CSS2/box.html#collapsing-margins) on the root of a [block formatting context](https://www.w3.org/TR/CSS2/visuren.html#block-formatting) (BFC); or
2. have a new type of context that's just like BFC _except that it doesn't suppress margin-collapse on the root_ (and have a new `display` value that creates such a context, much like `flow-root` does with BFC).

Here is the problem that this would solve:

In prose/WYSIWYG situations—where the developer isn't in control of the order that various elements end up appearing in—some kind of "clearfix" is often needed to prevent certain elements from "overlapping" a floated neighbor. A typical example would be when a left-floated image ends up next to a `ul` whose bullets are styled as absolute-positioned `::before` pseudo-elements on the `li`s.

The modern way to implement the "clearfix" is to give [`display: flow-root`](https://drafts.csswg.org/css-display/#valdef-display-flow-root) to the elements that create a problem if adjacent to a float. Doing so, however, creates a new BFC on the elements in question, thereby suppressing margin-collapse on them. This is a problem because margin-collapse is _extremely useful_ for maintaining consistent vertical rhythm in these WYSIWYG contexts.

One can more or less work around this by "undoing" the outward-facing margins at the extremities of the `flow-root` element's interior, so that only the vertical-margins of the element itself remain:

```css
ul {
  display: flow-root;
}

ul > :first-child,
ul > :first-child > :first-child,
ul > :first-child > :first-child > :first-child {
  margin-top: 0;
}

ul > :last-child,
ul > :last-child > :last-child,
ul > :last-child > :last-child > :last-child {
  margin-bottom: 0;
}
```

but it's ugly and, worse, unreliable (it only works for however many layers of `> :first-child`/`> :last-child` you include).

In short, the suppression of margin-collapse prevents `display: flow-root` from being a satisfactory "clearfix" solution in many situations. To my mind, what's missing is the ability to _opt in_ to margin-collapse for a BFC (or to create a new type of context just like BFC but without the suppression of margin-collapse on the root).

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6752 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 21 October 2021 21:52:40 UTC