test

Overflow: hidden container doesn't fit adjacent floated element inside of itself. Floated element goes beside the container (block box). But when overflow hidden deleted, adjacent floated element will go inside the container.

by Laimis Petravicius

HTML

<div id="orange_box"></div>
<!--<div style="clear:both;"></div>-->
<section class="clearfix">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
</section>

<div id="blue_box"></div>

CSS

aside, article, section, header, footer, nav {
	display: block;
}
html, body {
	margin: 0;
	padding: 0;
}
body {
	width: 800px;
	margin: 0 auto;
	font: 90% Georgia, "Times New Roman", Times, serif;
}
div {
	width: 50px;
	height: 50px;
	padding: 50px;
	margin-right: 25px;
}
section {
	background: rgb(178,155,107);
	padding: 25px 0 25px 50px;
  overflow: hidden;
}

.one {
	background: rgb(207, 255, 245);
	float: left;

}
.two {
	background: rgb(101,209,255);
	float: left;
}
.three {
	background: rgb(255, 231, 181);
	float: left;
}

#blue_box {
	width: 300px;
	height: 100px;
	background: blue;
	margin-top: 50px;
}

#orange_box {
	width: 300px;
	height: 50px;
	background: orange;
	float: right;
}
.clearfix:before,
.clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
	clear: both;
}