0

I recently came across this implementation of the OOCSS media object in the inuitcss framework:

.#{$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;
    }

}

While I know what a block formatting context is, I am still not sure why the author used a clearfix on .media instead of using overflow: hidden; like in the original media object.

I understood that the block formatting context on the object's body is necessary to prevent the content from flowing below the image, but what benefit has the clearfix on the parent over using the overflow property on it?

Sven
  • 12,997
  • 27
  • 90
  • 148

1 Answers1

0

Great question! First of all Harry Roberts, the creator of Inuit is super smart, so I'm sure he had his reasons. That said, I don't understand the inconsistency either, however, I probably wouldn't use overflow: hidden unless I didn't need to worry about it's contents getting clipped or having a scroll bar added accidentally.

Using overflow: hidden is a quick convenient solution for forcing an element to have layout, but using a clearfix is generally a more comprehensive solution. Either way, it looks like the main media block is being styled correctly to handle all clearfixing issues.

Clearing Floats: An Overview of Different clearfix Methods

Stay awesome!

Benjamin Gandhi-Shepard
  • 151
  • 5