Question

我最近在inuitcss框架中遇到了this 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;
    }

}

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

我明白对象主体上的块格式化上下文是必要的，以防止内容在图像下方流动，但是父对象使用溢出属性有什么好处呢？

Answer 1

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

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

Clearing Floats: An Overview of Different clearfix Methods

保持精彩！

CSS媒体对象：Clearfix vs overflow

1 个答案: