As you progress from the most basic web development skills, the solution to one problem often creates a new problem. Such is the case when we start using HTML‘s align attribute on an image to wrap text. If you open the first Codepen below and view it full screen you will see that the result is far from satisfactory.
Required knowledge:
Problem
In the example below, the images have been floated to the right of the text. In the “Without clear” image, we see the King Protea heading to the left of the Sugarbush picture, when we want it to appear below the level of the bottom of the Sugarbush picture. We only want text/information about the Sugarbush to be next (“wrapped”) to the left of the Sugarbush image.
This is because the align attribute removes an element from the normal flow of the entire page (not just the container element), it will float to the left of all the text, even block-level elements like <h1>. You can see proof of this in the code: even using the block-level <article> tags do not solve the problem as one might expect.
See the Pen HTML’s align attribute by David Fox (@foxbeefly) on CodePen.
Clear
To prevent this from happening, we use CSS‘s clear attribute on the headings to ensure that the heading clears the element that is floating to its right.
The above is achieved by creating a CSS rule to apply the clear attribute using h2 as the selector. This can be achieved using inline CSS style as below, or in an external stylesheet as in the Codepen that follows:
<h2 style="clear: right;">Broad-leaved Sugarbush</h2>
Codepen
Play in the Codepen below to test the options:
See the Pen CSS clear attribute by David Fox (@foxbeefly) on CodePen.