The Developer Brains


FLOAT PROPERTY

Web Designing | Web Development


SEE MORE














</CSS3 FLOAT PROPERTY>





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


SEE MORE




















</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





















clearfix property is used to clear float for adujusting the child div inside the container class.
1. true
2. false




Check Now



CSS3 QUIZ







Next: CSS3 Font Property


Previous

      

Next Page













  Share TDB SCHOOL  

Share this E-Learning Website on social media platforms with your friends and followers