css - <div>元素超出边框

我正在尝试在Test1-Test4周围绘制黑色边框，以也在Test5周围绘制。此刻，Test5掉到了外面。有人知道如何绘制它以包含Test5吗？

.description {
  border: 1px solid;
}

.descriptionTop {
  display: inline-block;
}

.ao {
  padding: 5px;
  font-weight: 700;
  text-transform: uppercase;

}

.pr {
  text-align: right;
  float: right;
}

.pm {
  border: solid 1px #53a318;
  border-radius: 3px;
  color: #53a318;
  box-sizing: border-box;
  font-size: 12px;
  float: right;
  padding: 2px 8px;
}

<div class="description">
  <div class="descriptionTop">
    <span class="descriptionLeft">Test1</span>
    <span class="ao">Test2</span>
  </div>
  <div class="pr">
    <div>
      <span>Test3</span>
      <span>Test4</span>
    </div>
    <div class="pm">Test5</div>
  </div>
</div>

最佳答案

将overflow: auto;添加到容器中以包含浮动元素：

.description {
  border: 1px solid;
  overflow: auto;
}

.descriptionTop {
  display: inline-block;
}

.altOffer {
  padding: 5px;
  font-weight: 700;
  text-transform: uppercase;

}

.prices {
  text-align: right;
  float: right;
}

.promotion {
  border: solid 1px #53a318;
  border-radius: 3px;
  color: #53a318;
  box-sizing: border-box;
  font-size: 12px;
  float: right;
  padding: 2px 8px;
}

<div class="description">
  <div class="descriptionTop">
    <span class="descriptionLeft">Test1</span>
    <span class="altOffer">Test2</span>
  </div>
  <div class="prices">
    <div>
      <span>Test3</span>
      <span>Test4</span>
    </div>
    <div class="promotion">Test5</div>
  </div>
</div>