Clearing Floats


<style>
body {
	width: 610px;
}

#wrap {
	overflow: hidden;
	background: grey;
}
p {
	border: 1px solid black;
}
.test {
	width: 20px;
	height: 20px;
	float: left;
	background: purple;
	margin: 10px;

}
.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

.clear {
	clear:both;
}

.float_rt{
	float: right;
}
.testimonial_box{
	background: #f3f;
	 width:324px; 
	 height: 123px;
	 overflow:hidden;
}
</style>
<title>clearing floats</title>
<body>
	<div id="wrap">
		
<p style="background:red">	asdfa
	sadf

</p>
asdfasdf<br>
<div style="background:red; width:100px; height:100px; float:left"></div>
asdfasdf<br>
asdfasdf<br>
asdfasdf<br>
asdfasdf<br>
asdfasdf<br>


<p style="background:blue">	asdfa
	sadf
	sadf
	asdfasdf
	sadf
	sadfsadfs
	asdf
<br>	
	asdfa
	sadf
	sadf
	asdfasdf
	sadf
	sadfsadfs
	asdf
</p>


<div style="width:100px; background:blue">
	<div class="test">1</div>
	<div class="test">2</div>
	<div class="test"></div>
	<div class="test"></div>
	<div class="test"></div>
	<div class="test"></div>
	<div class="clear"></div> <!--used when not inside a container-->
</div>

<div class="clear"></div>
<br />

<div style="width:100px; background:blue" class="clearfix">
	<div class="test">1</div>
	<div class="test">2</div>
	<div class="test"></div>
	<div class="test"></div>
	<div class="test"></div>
	<div class="test"></div>
</div>
<br/>

<div style="width:100px; background:blue; overflow:hidden;">
	<div class="test">1</div>
	<div class="test">2</div>
	<div class="test"></div>
	<div class="test"></div>
	<div class="test"></div>
	<div class="test"></div>
</div>
<br>
<div style="width:100px; background:blue; overflow:hidden;">
	<div class="test">1</div>
	<div class="test float_rt">2</div>
	<div class="test">1</div>
	<div class="test float_rt">2</div>
</div>

<div class="testimonial_box">
	<div class="test">
		<img src="http://stscdn.paravel.netdna-cdn.com/wp-content/uploads/2013/12/minamarkham-125x125.jpg" height="125" width="125">
	</div>
	<div class="test float_rt">
		<p>I've been out of town for the past 10 days just logged in and everything works beautifully!!!</p><br>
		<p>Jan Llyod <br>ASEA</p>
	</div>
</div>
</body>