與流體寬度內容嵌套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

回答

相關問題