The CSS3 float property is used to place different HTML elements on right and left sides of its container.

How to use CSS3 float property?

CSS3 float property is useful if we want to slow the HTML element on the right or left side of its container class. But it can create a problem of overflow. To solve this problem we use clearfix property to clear floats.

• Float Example
  The element selector is used to select HTML elements based on their name.

<style>

/*example*/

.tdb-container{

width:200px;

background-color:black;

min-height:30px;

}

.tdb-float{

	height:50px;

	float:right;

	background-color:orange;

}

</style>

<style>

.tdb-container{

	width:200px;

	background-color:black;

	min-height:30px;

	padding:5px;}

.tdb-float{

	height:50px;

	float:right;

	width:50px;

	background-color:orange;}

	</style>



	<div class="tdb-container">

	<div class="tdb-float">

	float</div>

	</div>

How to use CSS3 clearfix property?

CSS3 clearfix property is used to clear float for adjusting the child div inside the container class.

• Clearfix Example
  we can use overflow property on parent container class. .

<style>

/*example*/

.tdb-container{

width:200px;

background-color:black;

min-height:30px;

overflow:auto;

}



</style>

<style>

.tdb-container{

	background-color:black;

	min-height:30px;

	padding:5px;

	overflow:auto;}

.tdb-float{

	height:50px;

	float:right;

	width:100px;

	background-color:orange;}

	</style>



	<div class="tdb-container">

	<div class="tdb-float">

	floating div</div>

	</div>