CSS 媒体对象 : Clearfix vs overflow

Question

我最近遇到了 this inuitcss框架中OOCSS媒体对象的实现:

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

}

虽然我知道 block 格式化上下文是什么，但我仍然不确定为什么作者在 .media 上使用了 clearfix 而不是像在中那样使用 overflow: hidden; original media object .

我知道对象主体上的 block 格式化上下文对于防止内容在图像下方流动是必要的，但是在父级上使用 overflow 属性的 clearfix 有什么好处？

Answer 1

好问题!首先，因纽特人的创造者哈利罗伯茨非常聪明，所以我相信他有他的理由。也就是说，我也不理解这种不一致，但是，我可能不会使用 overflow: hidden 除非我不需要担心它的内容被剪裁或意外添加滚动条.

使用 overflow: hidden 是强制元素进行布局的一种快速方便的解决方案，但使用 clearfix 通常是更全面的解决方案。无论哪种方式，看起来主媒体 block 的样式都正确处理了所有 clearfixing 问题。

Clearing Floats: An Overview of Different clearfix Methods

保持出色!