Float is great for wrapping text around an element, like when text wraps around an image in a magazine layout. Floating multiple elements will align them side by side.
Setting clear on an element will make sure it does not wrap around a floating element.
To float an element, enable float left or float right properties in the Layout section of the Style Panel.
- None (default) - the element will be in the normal document flow
- Left - float an element to the left of the parent element.
- Right - float an element to the right of the parent element.
To correctly float an element, the text elements that you want to wrap have to be directly below the element that will be floated.
Float an image
Here’s how to float an image to the left and have the text underneath wrap around:
- Select an image that sits on top of text elements
- Go to the Styles Panel
- Under the Layout section,click the float left option
- Set some margin on the right and bottom to push the wrapping content away from the image.
When floating an image to the right, remember to add left and bottom margin to create space.
Float for advanced layout
Flexbox can accomplish all layout tasks listed below more easily and efficiently. Learn more about using flexbox.
The float property can also be used to horizontally stack elements. This layout technique is used on many Webflow components.
- Columns - to horizontally stack columns inside of a row
- Collection list layout - based on
- Nav links - to horizontally stack the nav links inside of the nav menu
- Menu button - to push the menu button to the right of the container inside the nav bar
- Nav menu - to push the the nav menu to the right of the container inside the navbar
- Brand link - to push the brand link to the left of the container inside the navbar
You can use floats to stack elements horizontally and fill up the entire width of a parent element, like the columns element. Follow these steps to create this type of layout:
- Drop a div block on the page—this will be your wrapper
- Drop 3 div blocks inside the wrapper
- Create a class on a div block
- Set a width of 33.33% and set float left
- Apply the same class to the other two div blocks
You can use floats to also shift an element left or right in a parent element. The process is the same as floating an image, described above.
Setting clear on an element will make sure it does not wrap around a floated element. It is applied on any element stacked below the floated element, not on the floated element itself.
You can choose one of the following clear values:
- Left - prevents an element from wrapping around a floated element when it’s floated to the left.
- Right - prevents an element from wrapping around a floated element when it’s floated to the right.
- Both - prevents an element from wrapping around a floated element, regardless of whether it’s floated to the left or right.
To set clear on an element that’s being wrapped, follow these steps:
- Select the element below a floated element
- Go to the Styles Panel
- Under the Layout section, click on the Clear value that you want to set