CSS 媒体对象：Clearfix 与溢出答案

【问题标题】：CSS media object: Clearfix vs overflowCSS 媒体对象：Clearfix 与溢出
【发布时间】：2014-11-28 20:52:34
【问题描述】：

我最近遇到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;
    }

}

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

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

【问题讨论】：

标签： css oocss inuit.css

【解决方案1】：

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

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

Clearing Floats: An Overview of Different clearfix Methods

保持真棒！

【讨论】：