</CSS3 Float Property>

How to use CSS3 float property?

CSS3 float property is useful if we want to slow html element on 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>

Try it Yourself

How to use CSS3 clearfix property?

CSS3 clearfix property is used to clear float for adujusting 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>

Try it Yourself

FLOAT PROPERTY

</CSS3 FLOAT PROPERTY>

</CSS3 Float Property>

How to use CSS3 float property?

How to use CSS3 clearfix property?