css浮动，而不是浮动？

Question

我有一些DIV浮动，但是由于某些原因，第三个DIV不在第一个DIV之下。我不知道为什么？我认为这与图像有关。当图像不在其中时，它们可以很好地浮动。

http://jsfiddle.net/xtian/9Je65/

HTML：

<div class="dl-content">
            <div class="dl-content-left">
                <div class="content-block">
                    <img src="http://demo.omnigon.com/christian_bovine/SOLIEF/img/thumbs/thumb1.jpg" alt="">
                    <h4 class="left">The History of Documentation</h4>
                    <p>The Historical Documentation Exhibit is now open on Ellis! Come view hundreds of...</p>
                </div>

                <div class="content-block">
                    <img src="http://demo.omnigon.com/christian_bovine/SOLIEF/img/thumbs/thumb2.jpg" alt="">
                    <h4 class="left">Rebuilding Ellis One Brick at a Time</h4>
                    <p>The Historical Documentation Exhibit is now open on Ellis! Come view hundreds of...</p>
                </div>

                <div class="content-block">
                    <img src="http://demo.omnigon.com/christian_bovine/SOLIEF/img/thumbs/thumb3.jpg" alt="">
                    <h4 class="left">Title Number 3</h4>
                    <p>The Historical Documentation Exhibit is now open on Ellis! Come view hundreds of...</p>
                </div>

                <div class="content-block">
                    <img src="http://demo.omnigon.com/christian_bovine/SOLIEF/img/thumbs/thumb3.jpg" alt="">
                    <h4 class="left">Title Number 4</h4>
                    <p>The Historical Documentation Exhibit is now open on Ellis! Come view hundreds of...</p>
                </div>
            </div>    

            <div class="dl-content-right">
                <img src="img/thumbs/ad1.jpg" alt="">
            </div>
        </div>

CSS：

    .dl-content{
    width:940px;
    margin: 0 auto;
    padding: 0 20px;
    overflow: hidden;
}

.dl-content-left{
    width:618px;
    float: left;
}

.dl-content-left .content-block{
    width:307px;
    float:left;
    margin-bottom: 20px;
}

.dl-content-left .content-block img{
    width: 139px;
    float:left;
    margin: 0 8px 0 0;
}

.dl-content-left .content-block p{
    float:left;
    width:150px;
    font-size: 12px;
    line-height: 1.4;
}

.dl-content-right{
    float:left;
    width: 300px;
    margin-left: 20px;
}

.dl-content-right img{
    width: 300px;
}

Answer 1

我认为这与divs的高度有关，因为高度尚未设定。

我在其中添加了一个clear div，将两组divs分开，现在它可以工作了：

演示here

你也可以在divs上设置一个高度，这样也可以解决这个问题：

演示here