如何擴展這個浮動元素來自動填充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>