css - 元素落在边框之外

Question

我试图在 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>

Answer 1

将 overflow: auto; 添加到容器以包含 float 元素:

.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>