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

Question

Недавно я наткнулся на this реализации объекта 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; 
    } 

} 

В то время как я знаю, что контекст блок форматирования, я до сих пор не знаю, почему автор использовал clearfix на .media вместо overflow: hidden;, как в original media object.

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

Answer 1

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

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

Clearing Floats: An Overview of Different clearfix Methods

Оставайтесь удивительным!