html - 外部 div 高度不随着内部 img 扩展

Question

我有这样的结构:

HTML

<div class="cat_item">
    <div class="cat_image">
         <img src="/res/imyg/srm450v2.jpg" />
    </div>
    <div class="cat_desc">
        <h2>Mackie - SRM450v2</h2>
        <p>
             Description Text
        </p>
     </div>
</div>

少

.cat_item {
  padding:10px;
  border-radius:5px;
  background-color:white;

  box-shadow:2px 2px 5px black;

  color:black;

  .cat_image {
    float:left;

    margin-right:25px;
    padding:5px;

    background-color:red;

    img {
      width:125px;
      height:175px;
    }
  }

  .cat_desc {
    padding:5px;
  }
}

现在我希望 cat_item div 改变高度，以便它适合图像。但是，只有文本会影响 cat_item div 的高度。我做错了什么？

Answer 1

这是 float 的。尝试 clearfix CSS 或设置 overflow: hidden 到外部 div。

How to clear CSS floats without extra markup – different techniques explained. There are three major approaches: a) Floating the containing element as well, b) Using overflow: hidden on the container, c) Generating content using the :after CSS pseudo-class.

发件人:http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/