Float

CSS is host to many different methods of defining a layout. You can use flex to dynamically change layouts, grid to conform elements to a uniform layout, or positioning to manually set the layout. While we went over all of these methods in class, we did not cover as much detail as possible, nor did we cover every method of layout.

In chapter fifteen of Learning Web Design the float method is discussed. This method allows the user to ‘float’ an element out in a direction, wrapping text and other elements around it.

To use an image as an example, I created a similar setup to the example in the writing. A block of text, and an image set inside the box. As you can see, the image sits above the text, which does not wrap. This leaves an excess of empty space in the page which is not ideal.

A webpage with an isolated image and text, containing a large amount of empty space.

Here I used CSS to ‘float’ the image to the right, which then wraps the text around it. I also add a small margin to add some nice spacing to the image. You can compare these images and see how the float styling works.

A webpage with an image and wrapped text, reducing the amount of empty space.

This method would be very useful for small adjustments where you would need an element within a box to be easily positioned relatively inside the parent element. Especially so as this works for anything that is displayed as a box, not just images, they can also be styled individually, allowing for more options when setting up a layout.

Another interesting property of this attribute comes when using images. When using a transparent image, you can set the text wrapping to be based off of the borders of the transparent space within the image. This allows you to get complex layouts not possible to my knowledge with the other methods.

There are surely many interesting possibilities with float and all the other different methods of defining a layout. I am excited to learn more about what you can do with CSS in the future, and to apply this information to my own work.