clear property ( left, right and both)

 * Clear property is used to make the non-floating sibling start after the floating sibling ends.

1)

when there is only 2 children and one of them is floating:

Child 3 used the property clear: left; because child 1 is floating in the left, if child 1 was floating right , child 3 would have use clear: right;

The green box is child 1 with float: left; , blue box is the parent and brown box is child 3 with clear: left;

2)

When there is 3 children and 2 of them is floating one in right and one in left

Here child 1 is floating left , child 2 is floating right and child 3 is non floating , therefore child 3 uses clear: both; to start at the end of both

Here green box is child 1 , blue box is the parent div , orange box is child 2 and brown box is child 3 with clear: both;