具有流体宽度内容的嵌套 clearfix答案

【问题标题】：Nested clearfix with fluid width contents具有流体宽度内容的嵌套 clearfix
【发布时间】：2017-04-14 23:49:31
【问题描述】：

考虑这种情况：

有一个内容宽度可变的布局，固定侧边栏浮动到右侧。所述布局的容器正在使用 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;
  }
}

预期：

反而得到：

有谁知道如何在不限制内容宽度或使用其他布局模式（弹性框、绝对定位）的情况下解决此问题。不使用溢出的额外点：隐藏，因为它会剪切绝对位于布局内的任何内容。

【问题讨论】：

标签： css layout css-float clearfix

【解决方案1】：

你可以试试添加这个：

.wrap {
  ...
  overflow: hidden;
}

jsFiddle

或者，使用calc()：

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

jsFiddle

【讨论】：