嵌套媒體對象clearfix不起作用

使用來自N. Sullivan的OOCSS媒體對象。我修改了原來的css以刪除隱藏的溢出，並用micro-clearfix替換它。我遇到的問題是當我嘗試嵌套媒體對象時，嵌套的媒體對象不清除它的浮點數。我試圖避免溢出：隱藏;嵌套媒體對象clearfix不起作用

請看下圖：http://codepen.io/anon/pen/kDpLr

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Media Object</title> 
    </head> 
    <body> 

     <div class="media"> 

      <a href="http://twitter.com/stubbornella" class="img"> 
      <img src="http://stubbornella.com/profile_image.jpg" height="200" width="200" alt="me" /> 
      </a> 

      <div class="bd"> 
      Here is some text inside the media object. Here is some text inside the media object. 
      </div> 

     </div> 

     <div class="media"> 

      <a href="http://twitter.com/stubbornella" class="img"> 
      <img src="http://stubbornella.com/profile_image.jpg" alt="me" height="200" width="200" /> 
      </a> 

      <div class="bd"> 
      <h2>Headline</h2> 
      <p>Here is some text inside the media object. Here is some text inside the media object. Here is some text inside the media object.</p> 
      <div class="media"> 

        <a href="http://twitter.com/stubbornella" class="img"> 
        <img src="http://stubbornella.com/profile_image.jpg" alt="me" /> 
        </a> 

        <div class="bd"> 
        Here is some text inside the media object. 
        </div> 

       </div> 
      </div> 

     </div> 
    </body> 
</html>

/* ====== media ====== */ 
.media { 
    margin:10px; 
    border: 1px solid red; 
    @extend %clearfix; 
} 

.bd { 
    @extend %clearfix; 
} 

.media .img { 
    float: left; 
    margin-right: 10px; 
    border: 1px solid #ddd; 
} 

.media .img img { 
    display:block; 
} 

.media .img-right { 
    @extend %clearfix; 
    float:right; 
    margin-left: 10px; 
} 

%clearfix { 
    &:before, 
    &:after { 
     content: " "; 
     display: table; 
    } 
    &:after { 
     clear: both; 
    } 
}

來源

2013-02-25 Jeremy A

你沒有正確清除浮動 - 使用clearfix只保證.media元素就其浮動子元素去延伸，因此工作與overflow: hidden相同。

您只需要將clear: both添加到.media選擇器本身（而不是僞元素：之前或之後：元素之後），然後您將解決該問題。

來源

2013-02-25 00:48:10 Terry

謝謝，我實際上有更好的運氣，漂浮'bd'類。 – 2013-02-25 02:59:27

嵌套媒體對象clearfix不起作用

回答

相關問題