Andrea Bang
Waverly
Search results
Rated the #1 Resource Management Software on G2. Trusted by 4,500+ professional services teams to plan projects and schedule work. Free 14-day trial.
- Log In
New to Float? Try for free.
- Try for Free
We would like to show you a description here but the site...
- Float Help Center
Get up to speed quickly and elevate your planning...
- Join Our Global Team
Expense up to $1500 USD on work-related computer and office...
- Pricing
Pricing is based on the number of people you schedule with...
- Integrations
Use the Float API to interact with your team's data and...
- 10 Tips for Applying for a Remote Role at Float
Since starting Float in 2012, I’ve reviewed thousands of...
- Scheduling
Float is our team's bible for booking project work. If it's...
- Time Tracking
The #1 rated resource management software with time...
- Planning
Float has become my 'ride or die' for planning our team's...
- Log In
The meaning of FLOAT is an act or instance of floating. How to use float in a sentence.
- Overview
- Try it
- Syntax
- Examples
- Browser compatibility
- See also
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).
A floating element is one where the computed value of float is not none.
As float implies the use of the block layout, it modifies the computed value of the display values, in some cases:
Values
left The element must float on the left side of its containing block. right The element must float on the right side of its containing block. none The element must not float. inline-start The element must float on the start side of its containing block. That is the left side with ltr scripts, and the right side with rtl scripts. inline-end The element must float on the end side of its containing block. That is the right side with ltr scripts, and the left side with rtl scripts.
How floated elements are positioned
As mentioned above, when an element is floated, it is taken out of the normal flow of the document (though still remaining part of it). It is shifted to the left, or right, until it touches the edge of its containing box, or another floated element. In this example, there are three colored squares. Two are floated left, and one is floated right. Note that the second "left" square is placed to the right of the first. Additional squares would continue to stack to the right, until they filled the containing box, after which they would wrap to the next line. A floated element is at least as tall as its tallest nested floated children. We gave the parent width: 100% and floated it to ensure it is tall enough to encompass its floated children, and to make sure it takes up the width of the parent so we don't have to clear its adjacent sibling.
Clearing floats
Sometimes you may want to force an item to move below any floated elements. For instance, you may want paragraphs to remain adjacent to floats, but force headings to be on their own line. See clear for examples.
BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
•Block formatting context
•Use clear to force an item to move below a floated element.
Code sample
.left {float: left;background: pink;}.right {...Definition and Usage. The float property specifies whether an element should float to the left, right, or not at all. Note: Absolutely positioned elements ignore the float property! Note: Elements next to a floating element will flow around it. To avoid this, use the clear property or the clearfix hack (see example at the bottom of this page).
New to Float? Try for free.
Jul 8, 2009 · Float is a CSS positioning property. To understand its purpose and origin, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. This is commonly and appropriately called "text wrap".
Jul 9, 2024 · In financial terms, the float is money within the banking system that is briefly counted twice due to time gaps in registering a deposit or withdrawal. These time gaps are usually due to...
