DIV中的图像超出了它的边界

Question

我不知道为什么会这样.我能解决这个问题的唯一方法就是在文本之后添加一些断点,但显然这不是一个可接受的解决方案.

孤立的CSS:

.center_column {
    max-width: 892px;
    float: left;
}

.content {
    width: 892px;
    background-color: #FFF;
    background-image: url("style/contentpost.png");
    background-repeat: no-repeat;
    border-style: solid;
    border-width: 2px;
    border-color: #7699bb;
    border-radius: 10px;
}

.content_wrap {
    margin-top: 40px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    text-align: left;
}

.text {
    width: 100%;
    margin-top: 20px;
    text-align: justify;
    text-justify: distribute;
    font-weight: normal;
    font-size: 16px;
}

隔离的HTML:

<div class="center_column">
    <div class="content">
        <div class="content_wrap">
            <div class="text">
                <img src="image">Text
            </div>
        </div>
    </div>
</div>

为什么会这样？谁能告诉我如何解决这个问题？先感谢您 :)

Answer 1

这将强制浏览器计算包含float的div的高度:

.text{
     overflow: hidden;
}

此外,谷歌for clearfix,如果你不想overflow:hidden出于某种原因.