От автора: в CSS исключение (которое в настоящее время находится в «рабочем проекте» спецификации) похоже на float в том, что оно позволяет встраивать контент, чтобы обернуть элемент. Но не совсем, как float.
Чен Хуэй Цзин приводит отличное пояснение: Элемент исключения — это элемент уровня блока, который не является плавающим, а генерирует поле исключения. Элемент исключения устанавливает новый контекст форматирования блока. Элемент становится исключением, когда для его свойства wrap-flow вычисляется что-то отличное, от его начального значения auto. Когда элемент становится исключением, встроенный контент будет обтекать области исключения, но в пределах своего собственного контекста форматирования.
Поддержка ограничена Edge и IE (опять же, на момент написания). Эти данные по поддержке браузерами взяты с Caniuse, где вы можете найти более подробную информацию. Число указывает, что браузер поддерживает функцию в этой и выше версиях.
Чен прекрасно объясняет, чем они полезны, но в последнее время также начались обсуждения по другому поводу. Роб Вейхерт документирует простую ситуацию с макетом, в которой изображение перемещается влево, а текст оборачивается вокруг него:
Как показывают эти светло-красные полосы, Роб установил несколько колонок display: grid;, чтобы выровнять элементы в статье по этим осям. Классическая «редакционная верстка». Но на самом деле не существует оптимального механизма, чтобы поместить это изображение в сетку и поддерживать перенос. Размещая и содержимое, и изображение в отдельных элементах сетки, вы не получите перенос. Вы можете использовать float, но это не использует сетку.
Рэйчел Эндрю сказала, что решение — исключения CSS. В то время, как пример Роба в конечном итоге должен был использовать float, Рейчел переделала это с помощью исключений. Исключения делают код намного проще.
/* c floats, воспроизводит точно то, что делает сетка */
img { float: left; width: calc( 3 * ((100% - 50px - 15em) / 6) + 50px + 2em );
} /* с исключениями, используя сетку */
img { grid-row: 2; grid-column: 1 / 3; -ms-wrap-flow: both;
}Возможно, мы можем поддержать пример Рейчел, чтобы посмотреть, что будет происходить со статусом спецификации и с другими вариантами использования автора.
Автор: Chris Coyier
Источник: https://css-tricks.com/
Редакция: Команда webformyself.