如何扩展这个浮动元素来自动填充clearfix div

Question

在一个任务中，我试图复制老师用html和css给出的this picture，但尽管我尽了最大努力，但只得到this picture。

我怎样才能让旁边的auot-很好地填充空间？

我的HTML：

<div class="clearfix"> 
    <section>...</section> 
    <aside>...</aside> 
</div> 

我的CSS：

section, aside { 
    float: left; 
} 

section { 
    width: 55%; 
} 

aside { 
    ? 
} 

Answer 1

这是你想达到什么样的？道歉，如果我错过了什么。我所做的是手动调节高度，所以

 #aside { 
      width: 43%; 
      float: right; 
      height: 222px; 
     } 

See my attempt

Answer 2

一个简单的方法是使用Flexbox的。在这个例子中，我把桌子转了一圈，并通过设置max-width: 20%（只是为了强调效果）来将红色的div填充到其余的空间中，以便蓝色div不会超出该宽度。当然，flex: 1两个div都会尝试与容器等宽。

.clearfix { 
 
    display: flex; 
 
    flex: 1 1 100%; 
 
    width: 100%; 
 
} 
 

 
section { 
 
    flex: 1; 
 
    background-color: red; 
 
} 
 

 
aside { 
 
    flex: 1; 
 
    background-color: blue; 
 
    max-width: 20%; 
 
}

<div class="clearfix"> 
 
    <section> 
 
    asd<br /> 
 
    asd<br /> 
 
    asd<br /> 
 
    asd<br /> 
 
    asd<br /> 
 
    asd<br /> 
 
    asd<br /> 
 
    asd<br /> 
 
    </section> 
 
    <aside>...</aside> 
 
</div>