Float in Practice

In the following example, the same block of HTML is presented twice. In the first version, floats are used to place two red blocks on the left side and one on the right side. A heading and paragraph text then “flow” around them.

In the second block, no floats are used to compare what “normal flow” would look like.

With clear:

The same code from the above “Example 1” was used in the example below. However, a clear: left; was added to the paragraph element. Notice that this forces it to a new line below the red squares, whereas before, it started between them.