css - 向右/向左浮动使元素隐藏

Question

出于某种原因，当我向我的元素添加右/左浮动时，它会在下一行的图像元素后面显示它们。

这是实际的事件页面:

http://www.dealerbyte.co.uk/used-cars.php

代码如下:

HTML

      <div class="col-md-8 col-sm-8 col-lg-8">
        <div class="listing-container">
          <h3 class="model-listing-title">2011 (11) Mercedes-Benz C Class C250 CDI BlueEFFICIENCY Sport 4dr Auto</h3>
          <h3 class="price-listing">£17,998</h3>
        </div>
        <div class="listing-container-spec">
          <img src="media/img/mercedes-test.jpg" alt="mercedes-benz"/>
        </div>
      </div>

CSS

.listing-container {
    background-color:#dddddd;
    padding:0;
    border-radius:6px 6px 0 0;
    -moz-box-shadow:inset 0 0 10px #000000;
    -webkit-box-shadow:inset 0 0 10px #000000;
    box-shadow:inset 0 0 5px #000000;
    padding:1px 10px;
}

.listing-container-spec {
    background-color:#153066;
    width:100%;
    height:auto;
    display:block;
    position:relative;
}

.listing-container-spec img {
    width:60%;

}

.model-listing-title {
    font: 600 2em 'Open Sans', sans-serif;
    margin-top:0.1em;
    display:block;
    position:absolute;
    float:left;
}

.price-listing {
    font: 600 2em 'Open Sans', sans-serif;
    margin-top:0.1em;
    float:right;
    display:block;
    position:absolute;
}

如果您查看实时示例，您会注意到如果您检查元素，元素位于图像后面，当禁用 float 时它显示正常，但我希望价格类别向右浮动。

我怎样才能阻止它？

Answer 1

将 overflow:auto 添加到 .listing-container 并从 .price-listing 中删除 position:absolute; >.