Ausschlüsse (die sich zum Zeitpunkt, an dem ich schreibe, in einer „Arbeitsentwurf“-Spezifikation befinden) ähneln float insofern, als sie es Inline-Inhalten ermöglichen, um ein Element herum zu fließen. Aber nicht genau ein Float. Chen Hui Jing hat eine ausgezeichnete Erklärung
Ein Ausschluss-Element ist ein block-level Element, das kein Float ist und eine Ausschlussbox erzeugt. Ein Ausschluss-Element etabliert einen neuen Blockformatierungskontext.
Ein Element wird zu einem Ausschluss, wenn seine `wrap-flow`-Eigenschaft auf etwas anderes als seinen Anfangswert `auto` berechnet wird. Wenn ein Element zu einem Ausschluss wird, fließen Inline-Inhalte um die Ausschlussbereiche, aber innerhalb ihrer eigenen Formatierungskontexte.
Die Unterstützung ist auf Edge und IE beschränkt (erneut, zum Zeitpunkt, an dem ich schreibe)
Diese Browser-Supportdaten stammen von Caniuse, wo es weitere Details gibt. Eine Zahl bedeutet, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| Nein | Nein | 10* | 12* | Nein |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Nein | Nein | Nein | Nein |
Chen argumentiert überzeugend, warum sie nützlich sind, aber eine weitere Diskussionsrunde hat sich in letzter Zeit ebenfalls ergeben. Rob Weychert dokumentiert eine einfache Layout-Situation, in der ein Bild nach links gefloatet wird und Text darum herum fließt.
Wie diese hellroten Balken anzeigen, hat Rob einige display: grid;-Spalten eingerichtet, um Elemente im Artikel an diesen Achsen auszurichten. Ein klassisches „Editorial Layout“ in der Tat. Aber es gibt wirklich keinen guten Mechanismus, um dieses Bild auf das Grid zu platzieren und das Umfließen beizubehalten. Durch die Platzierung von Inhalt und Bild in separaten Grid-Elementen erhält man kein Umfließen. Man kann `float` verwenden, aber das nutzt das Grid nicht.
Rachel Andrew warf ein, dass die Antwort **CSS-Ausschlüsse** sind. Während Robs Beispiel letztendlich Floats verwenden musste, hat Rachel es mit Ausschlüssen neu gemacht. Ausschlüsse machen den Code viel einfacher.
/* with floats, replicating exactly what the grid is doing */
img {
float: left;
width: calc( 3 * ((100% - 50px - 15em) / 6) + 50px + 2em );
}
/* with exclusions, using the grid */
img {
grid-row: 2;
grid-column: 1 / 3;
-ms-wrap-flow: both;
}Vielleicht können wir mit einem Daumen hoch für Rachels Aufruf kommentieren, um zu sehen, wie der Status der Spezifikation und andere Anwendungsfälle von Autoren sind.