Grid and Flexbox have given us the ability to create layouts that once were incredibly difficult to realize, if not impossible. One of the most common examples is a three-column layout with all three columns the same height regardless of the contents. Another layout technique, which unlike its grid and flexbox counterparts has been around for quite some time, is float. Part of the CSS Logical Properties and Values Module, float is purpose-built to allow other content to wrap around the element being floated; as a result, it shines at manipulating images inside text and creating drop caps.
Drop caps are a way to style and add emphasis to text. They consist of creating a larger (sometimes more ornate) capital letter, usually at the beginning of a page or paragraph. Drop caps were often used in the illuminated manuscripts of the Middle Ages. The F at the beginning of the paragraph in figure 7.1 is an example of a drop cap in the Carmina Burana manuscript. Later, with the advent of the printing press, the concept carried over into print; printers created specialized glyphs and plates or simply used a larger font size. Drop caps are much rarer on the web, but they’re by no means impossible to create, and they’re a great way to make our online typography more interesting.