[CSS] container schiet omhoog bij float: left

body {
    background-color: #f3f4f6;
    margin: 0px;
}

#container {
    width: 850px;
    margin: 0 auto;
    background-color: #ffffff;
}

#left {
    float: left;
    width: 241px;
    height: 100px;
}

#right {
    float: left;
    width: 546px;
    height: 100px;
} 

body {
    background-color: #f3f4f6;
    margin: 0px;
}
 
#container {
    width: 850px;
    margin: 0 auto;
    background-color: #ffffff;
}
 
#left {
    float: left;
    width: 241px;
    height: 100px;
}
 
#right {
    float: left;
    width: 546px;
    height: 100px;
}

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

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

<div id="container">
	<div id="left">
		Left
	</div>

	<div id="right">
		Right
	</div>

	<div style="clear:both;"><!--No content --></div>
</div>

<div id="container">
	<div id="left">
		Left
	</div>
 
	<div id="right">
		Right
	</div>
 
	<div style="clear:both;"><!--No content --></div>
</div>