与流体宽度内容嵌套clearfix

有一个与流体宽度内容的布局，并漂浮在正确的固定侧栏。所述布局的容器正在使用clearfix来清除右边的浮动内容
在内容块中还有另一个块正在执行相同的操作。该第二块扩展到侧栏的高度，直到完全离开侧边栏的浮动与它的:after { clear: both }

实施例的HTML：

<section class="layout"> 
    <aside>main sidebar!</aside> 
    <div class="wrap"> 
    <article class="article"> 
     <header class="header"> 
     <span class="note">I break stuff!</span> 
     </header> 
     <div class="content"> 
     Main content! 
     </div> 
    </article> 
    </div> 
</section>

例如SCSS：

@mixin clearfix() { 
    &:before, 
    &:after { 
     content: ""; 
     display: table; 
    } 
    &:after { 
     clear: both; 
    } 
} 

.layout { 
    @include clearfix(); 

    .wrap { 
    margin-right: 200px; 
    background: gray; 
    } 

    > aside { 
    width: 200px; 
    height: 700px; 
    float: right; 
    background: salmon; 
    } 
} 

.article { 
    .header { 
    @include clearfix(); 
    background: green; 

    .note { 
     display: block; 
     float: right; 
     background: hotpink; 
    } 
    } 

    .content { 
    height: 200px; 
    background: red; 
    } 
}

预计：

代替了：

有谁知道如何解决这个问题，同时不限制内容的宽度或使用布点（Flexbox的，绝对定位）的替代模式。不使用溢出的额外点：隐藏，因为它削减了绝对位于布局内的任何内容。

来源

2016-11-30 Max

您可以尝试添加此：

.wrap { 
    ... 
    overflow: hidden; 
}

jsFiddle

或者，使用calc()：

.wrap { 
    width: calc(100% - 200px); 
    float: left; 
}

jsFiddle

来源

2016-11-30 15:40:08 Stickers

与流体宽度内容嵌套clearfix

回答

相关问题