xxxxxxxxxx
/*
Nowadays with flex and grid, float has no chance to be putted inside your code
But just for the knowledge of using this property.
===========================NOTICE===========================
you should use the 'clear' CSS property after the div that has the float prop
===========================NOTICE===========================
*/
.div-1{
float: left;
width: 50%;
background-color: #f00;
}
/*
after applying float i used clear: both
try this code and remove the clear property and see what will be happened
*/
.clear-float{
clear: both;
}
.div-2{
float: left;
width: 50%;
background-color: #00f;
}
.clear-float{
clear: both;
}
/* div-1 and div-2 will now be at the side of each other*/
/*
==========HTML Layout==========
<div class="div-1">DIV 1</div>
<div class="clear-float"></div>
<div class="div-2">DIV 2</div>
<div class="clear-float"></div>
*/
xxxxxxxxxx
/*
Puts your div on the right side of the screen
*/
.div-1{
float: right;
width: 50%;
background-color: #f00;
xxxxxxxxxx
/* Keyword values */
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;
/* Global values */
float: inherit;
float: initial;
float: revert;
float: revert-layer;
float: unset;
xxxxxxxxxx
#float_css {
float: none;
float: inherit; /*makes the children to float (for example if you use it on list or table)*/
float: right;
float: left;
}