CSS медиа-объект: Clearfix против переполнения

Question

Недавно я столкнулся с этой реализацией медиаобъекта OOCSS в среде inuitcss:

.#{$inuit-media-namespace}media,
%#{$inuit-media-namespace}media {
    @extend %clearfix;
    display: block;
}

.#{$inuit-media-namespace}media__img,
%#{$inuit-media-namespace}media__img {
    float: left;
    margin-right: $inuit-media-gutter;

    > img {
        display: block;
    }

}

.#{$inuit-media-namespace}media__body,
%#{$inuit-media-namespace}media__body {
    overflow: hidden;
    display: block;

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

}

Хотя я знаю, что такое контекст блочного форматирования, я до сих пор не уверен, почему автор использовал .media Вместо того, чтобы использовать overflow: hidden; как в оригинальном медиа-объекте.

Я понял, что контекст форматирования блока в теле объекта необходим для предотвращения потока содержимого ниже изображения, но какое преимущество имеет clearfix для родительского элемента по сравнению с использованием свойства overflow для него?

Answer 1

Отличный вопрос! Прежде всего, Гарри Робертс, создатель инуитов, очень умен, поэтому я уверен, что у него были свои причины. Тем не менее, я не понимаю, несоответствие, однако, я, вероятно, не буду использовать overflow: hidden если только мне не нужно беспокоиться о том, что его содержимое будет вырезано или случайно добавлена ​​полоса прокрутки.

С помощью overflow: hidden это быстрое удобное решение для того, чтобы заставить элемент иметь макет, но использование clearfix обычно является более комплексным решением. В любом случае, похоже, что основной медиа-блок правильно стилизован для решения всех проблем с исправлением ошибок.

Очистка поплавков: обзор различных методов очистки

Оставайся классным!