1/*
2 Nowadays with flex and grid, float has no chance to be putted inside your code
3 But just for the knowledge of using this property.
4 ===========================NOTICE===========================
5 you should use the 'clear' CSS property after the div that has the float prop
6 ===========================NOTICE===========================
7*/
8.div-1{
9 float: left;
10 width: 50%;
11 background-color: #f00;
12}
13/*
14 after applying float i used clear: both
15 try this code and remove the clear property and see what will be happened
16*/
17.clear-float{
18 clear: both;
19}
20.div-2{
21 float: left;
22 width: 50%;
23 background-color: #00f;
24}
25.clear-float{
26 clear: both;
27}
28/* div-1 and div-2 will now be at the side of each other*/
29/*
30 ==========HTML Layout==========
31 <div class="div-1">DIV 1</div>
32 <div class="clear-float"></div>
33 <div class="div-2">DIV 2</div>
34 <div class="clear-float"></div>
35*/