Wrap text around an image using float

Use float to wrap text around images and clear a wrapped element.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

To float an image to the left and have the text underneath wrap around:

  1. Select an image that sits on top of text elements
  2. Open layout settings in the Style panel
  3. Select float left
  4. Add margin to the right and bottom to create space between the image boundaries and wrapping content
 

When floating an image to the right, remember to add left and bottom margin to create space.

Clearing a wrapped element

To set clear on an element that’s being wrapped:

  1. Select the element below a floated element
  2. Open layout settings in the Style panel
  3. Select the Clear value that you want to set
 

Creating custom columns with floats

You can use floats to stack elements horizontally and fill up the entire width of a parent element, like the columns element. To create custom columns with floats: 

  1. Add a div block on the canvas — this will be your wrapper
  2. Add 3 div blocks inside the wrapper
  3. Create a class on one of the 3 div blocks you just added
  4. Set a width of 33.33% and set float left
  5. Apply the same class to the other two div blocks

You can also use floats to shift an element to the left or right within a parent element. The process is the same as floating an image, described above.

Flexbox can accomplish all layout tasks listed above more easily and efficiently. Learn more about using flexbox.

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top