Clear a floating element

Sometimes we want the text to stop floating around an embedded element. We need a good ol’ .clear attribute, then.

On a small mobile device, the following layout problem is probably unrecognizable. To study the example, please use a device with a view-port ≥ 600px.

The problem

When we embed an element like the image here the text floats around it. That’s what we want initially but now we start a new subsection.

New section beside the image

This new subsection still floats around the embedded image! Instead, we would like to begin a new block after the embedded element with the heading on the left as usual.

The solution

Again, we have an embedded element and the text floats around it as it should. Now we clear the float by adding the attribute {.clear} to the containing paragraph. And the floating stops for all the following content.

The section after the image

That’s it. We got our separate section.