你可以使用溢出属性的容器div，如果你没有任何div显示在容器上，例如:

<div class="cointainer">
    <div class="one">Content One</div>
    <div class="two">Content Two</div>
</div>

下面是下面的css:

.container{
    width:100%;/* As per your requirment */
    height:auto;
    float:left;
    overflow:hidden;
}
.one{
    width:200px;/* As per your requirment */
    height:auto;
    float:left;
}

.two{
    width:200px;/* As per your requirment */
    height:auto;
    float:left;
}

----------------------- 或 ------------------------------

    <div class="cointainer">
        <div class="one">Content One</div>
        <div class="two">Content Two</div>
        <div class="clearfix"></div>
    </div>

下面是下面的css:

    .container{
        width:100%;/* As per your requirment */
        height:auto;
        float:left;
        overflow:hidden;
    }
    .one{
        width:200px;/* As per your requirment */
        height:auto;
        float:left;
    }

    .two{
        width:200px;/* As per your requirment */
        height:auto;
        float:left;
    }
    .clearfix:before,
    .clearfix:after{
        display: table;
        content: " ";
    }
    .clearfix:after{
        clear: both;
    }

试试这个

.parent_div{
    display: flex;
}

你可以使用溢出属性的容器div，如果你没有任何div显示在容器上，例如:

<div class="cointainer">
    <div class="one">Content One</div>
    <div class="two">Content Two</div>
</div>

下面是下面的css:

.container{
    width:100%;/* As per your requirment */
    height:auto;
    float:left;
    overflow:hidden;
}
.one{
    width:200px;/* As per your requirment */
    height:auto;
    float:left;
}

.two{
    width:200px;/* As per your requirment */
    height:auto;
    float:left;
}

----------------------- 或 ------------------------------

    <div class="cointainer">
        <div class="one">Content One</div>
        <div class="two">Content Two</div>
        <div class="clearfix"></div>
    </div>

下面是下面的css:

    .container{
        width:100%;/* As per your requirment */
        height:auto;
        float:left;
        overflow:hidden;
    }
    .one{
        width:200px;/* As per your requirment */
        height:auto;
        float:left;
    }

    .two{
        width:200px;/* As per your requirment */
        height:auto;
        float:left;
    }
    .clearfix:before,
    .clearfix:after{
        display: table;
        content: " ";
    }
    .clearfix:after{
        clear: both;
    }

这是因为div的浮动。添加overflow:隐藏在外部元素。

<div style="overflow:hidden; margin:0 auto;width: 960px; min-height: 100px; background-color:orange;">
    <div style="width:500px; height:200px; background-color:black; float:right">
    </div>
</div>

Demo

你遇到了浮动错误(虽然我不确定它在技术上是否是一个错误，因为有多少浏览器表现出这种行为)。事情是这样的:

在正常情况下，假设没有显式地设置高度，块级元素(如div)将根据其内容设置其高度。父div的底部将超出最后一个元素。不幸的是，浮动元素会阻止父元素在确定其高度时考虑被浮动元素。这意味着如果你的最后一个元素是浮动的，它不会像普通元素那样“拉伸”父元素。

清算

有两种常见的方法可以解决这个问题。第一种是添加一个“清算”元素;也就是说，在被浮动元素之下的另一个元素将强制父元素拉伸。所以添加下面的html作为最后一个子元素:

<div style="clear:both"></div>

它不应该是可见的，通过使用clear:both，可以确保它不会位于被浮动元素的旁边，而是在它之后。

溢出:

第二种方法，也是大多数人(我认为)更喜欢的方法是改变父元素的CSS，这样溢出就不会“可见”。因此，将overflow设置为“hidden”将迫使父对象延伸到被浮动子对象的底部之外。当然，这只在你没有在父节点上设置高度的情况下才成立。

正如我所说，第二种方法是首选的，因为它不需要向标记中添加语义上无意义的元素，但有时需要溢出可见，在这种情况下，添加清除元素是可以接受的。

你需要添加overflow:auto到你的父div，以包含内部浮动的div:

<div style="margin:0 auto;width: 960px; min-height: 100px; background-color:orange;overflow:auto">
    <div style="width:500px; height:200px; background-color:black; float:right">
    </div>
</div>

jsFiddle例子