Edit in JSFiddle

/* vizualizálás */
.outer, .inner {
    padding: 20px;
}
.outer {
    background: red;
    width: 240px;
}
.inner {
    background: yellow;
    width: 80px;
    height: 80px;
    float: left; /* belső elemek balra floatolva */
}
.inner:nth-child(2) {
    background: darkSeaGreen;
}

/* (1) plussz elem clear: both/left/right */
.clear { clear: both }

/* (2) overflow: hidden */
.fix-w-overflow {
    overflow: hidden;
}

/* ::after pseudo clear */
.fix-w-pseudoelem::after {
    content: '';
    display: block;
    height: 0;
    clear: both;
}

/* csak a bemutatóhoz */

body {
    width: 280px;
    margin: 0 auto;
    cursor: default;
}
p {
    font-family: sans-serif;
    font-size: .8rem;
    text-align: center;
    background: darkSlateGray;
    color: snow;
    padding-top: .333em;
    padding-bottom: .333em;
}
.container {
    width: 280px;
    height: 160px;
}

<p>a probléma</p>
<div class="container">
    <div class="outer">
        <div class="inner"></div>
        <div class="inner"></div>
    </div>
</div>
<p>(1) plussz elem clear: both/left/right</p>
<div class="container">
    <div class="outer">
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="clear"></div>
    </div>
</div>
<p>(2) overflow: hidden</p>
<div class="container">
    <div class="outer fix-w-overflow">
        <div class="inner"></div>
        <div class="inner"></div>
    </div>
</div>
<p>(3) ::after pseudo clear</p>
<div class="container">
    <div class="outer fix-w-pseudoelem">
        <div class="inner"></div>
        <div class="inner"></div>
    </div>
</div>