CSS媒體對象：Clearfix VS溢出

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; 
    } 

} 

雖然我知道一個塊格式化上下文是什麼，我仍然不知道爲什麼作者在.media上使用了一個clearfix，而不是像在original media object中那樣使用overflow: hidden;。

我明白，對象正文上的塊格式上下文對於防止內容在圖像下面流動是必要的，但是使用上溢出屬性對父級的clearfix有什麼好處？

Answer 1

偉大的問題！首先，因紐特人的創造者哈里羅伯茨超級聰明，所以我相信他有他的理由。也就是說，我也不明白這種不一致，但是，除非我不需要擔心它的內容被剪輯或者意外添加了滾動條，否則我可能不會使用overflow: hidden。

使用overflow: hidden是強制元素進行佈局的快速方便的解決方案，但使用clearfix通常是更全面的解決方案。無論哪種方式，它看起來像主要媒體塊正在正確的樣式來處理所有clearfixing問題。

Clearing Floats: An Overview of Different clearfix Methods

停留真棒！