Question

使用N.Sullivan的OOCSS媒体对象。我修改了原始的css以删除隐藏的溢出并用micro-clearfix替换它。我遇到的问题是当我尝试嵌套媒体对象时，嵌套的媒体对象不会清除它的浮动。我试图避免溢出：隐藏;

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

Answer 1

您没有正确清除浮动 - 使用clearfix只能确保.media元素延伸到浮动子元素的位置，因此与overflow: hidden的工作方式相同。

您只需要将clear: both添加到.media选择器本身（而不是伪：before：：after元素），然后您将解决问题。

嵌套媒体对象clearfix无法正常工作

1 个答案: