0

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

}

虽然我知道什么是块格式化上下文，但我仍然不确定为什么作者使用 clearfix on而不是在原始媒体对象.media中使用overflow: hidden;like 。

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

4

1 回答 1

0

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

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

清除浮动：不同 clearfix 方法的概述

保持好状况！

于 2015-09-19T14:51:54.387 回答