The box model governs how elements are rendered. For any content in a block element, like this one, there are three nested boxes. The innermost box is the content, surrounded by padding out to the element's border. The border resides within an outer box that encloses the element's margins. If margin is zero, then the border and margin boxes are superimposed. If padding is zero then the border and content boxes are superimposed.
The bordered box above was floated left. That takes it out of the normal page flow. Text in the flow will honor the floated box's container boundaries, including margins. So the text flows around the box as you see here. Now, let's float right.
This box has content that will help illustrate how clearing works.