The fourth video explains how the CSS Floats work and what it is used for. If you do not want to watch the video (even though there is Batman and Robin in it), read on.

We use CSS Floats to create multi-columns layouts because floating elements sit side by side, and not on top of each other.

Take a look at the live example below.

• First, try to remove the clear: both; at the bottom and see what happens.
  Yes they will overlap with the non-floating elements. We need to clear the floats otherwise, they will overlap with the non-floating elements.
  
  Undo (CMD+Z or CTRL+Z) after trying, to put back the clear property
  
  
• Second, try to remove the float: left; on the #box-left
• Then try removing the float: right; on the #box-right
• Try also changing the float: right; on the #box-right to float: left; and it will still work the same.

And that’s how we create multi-columns layouts. In summary, two or more floating elements will sit side by side and not on top of each other. Remember to clear the floats, otherwise, they will overlap with the non-floating elements.