06_floating.html

Making a pot of tea is a splendid thing. There is scientific evidence that drinking tea can reduce blood pressure and increase wellbeing. A picture of a tall creamy white porcelain teapot. Some people drink a lot of tea, others prefer coffee (and they are wrong to make this choice, but we must allow them their folly).

Images can be floated to the left or right of other elements.

Inline content such as text will flow around the rectangular outline of the image.

Experiment

  1. Try adding float: right; to the teapot class.
  2. Observe that the rest of the article is also reformatted. Add clear: both to the article to ensure that doesn't happen
  3. Try adding padding-left: 4em; to the teapot class so that the text stays further away.
  4. Notice the image is halfway through the paragraph. What do you think will happen if you move it to the start of the paragraph, after the p tag, but before the text?

It is common to see float used in older examples of how to layout a page. It is no longer considered best practice because the flex layout model achieves the same with more predictable and controllable results.