7 Harnessing the full power of float
This chapter covers
- Creating a drop cap using float
- Using float to wrap text around the image
- Using CSS shapes to make the text follow the floated image’s shape
Grid and flexbox have given us the ability to create layouts that were previously incredibly difficult if not impossible to realize, one of the most common examples would be a three column layout with all three columns the same height regardless of the contents within. 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 Level 1 Module, float is purpose built to allow other content to wrap around the element being floated and as result really shines at manipulating images inside of text and at creating drop caps.