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 present a comparison of what “normal flow” would like.

With clear:

In the below example, the same code from the above “Example 1” was taken. 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 the two squares.