The clear:left, clear:right, clear:both (clear selector) is used to clear CSS floats or to prevent a float from affecting another HTML element such as another box if you have one box floated to the left or right or page content. When you use the clear selector in this context, the selector/box that is cleared will not be affected by the float and will appear below the floated box instead of next to it.
Additionally, the clear selector may be used to stop any float continuation. If you use floats and you find some content or a box you’ve created using CSS is floating when you don’t want it to, use clear:left to stop a float:left and likewise clear:right to stop a float:right from continuing. If you’re unsure and you want to stop floats completely, using clear:both is fine. However, clear:both clears both sides, obviously.