What does float mean in css

Its most common use is to wrap text around images. However, you can use the float property to wrap any inline elements around a defined HTML element, including lists, paragraphs, divs, spans, tables, iframes, and blockquotes.

Notice that there are no property values for center, top, and bottom. If you're using the Bootstrap CSS framework to build your site, then there are additional values to create responsive floats. Otherwise, you'll need to use media queries and set the specified screen width in pixels for when the element should float.

In CSS, the float property specifies how an element should float. The floated element will be removed from the normal flow of the page, but it will remain part of the flow — meaning, the element will be shifted to the left or right until it touches the edge of its container or another floated element. This is the key difference between the float property and the absolute position property in CSS.

While floated elements are still a part of the flow of the page, elements using absolute positioning are not. That means floated elements will affect the position of other elements and vice versa.

Absolutely positioned elements, on the other hand, will not affect the position of other elements nor will other elements affect their position. So the syntax would look something like:. Creating space around the floated elements can help improve the appearance of the layout. You can use a type selector to target the image and define it with the rule float: left or float: right.

That tells the browser two things. The first is that the image floats to the right in the paragraph. The second is that the text in the paragraph wraps around the image. Notice that the CSS includes a type selector to target the image, which is contained in the paragraph. Compare how the image appears on the page below when the float property is not applied. You can use a class selector to target the button class and define it with the rule float: left or float: right.

That makes the button float to the left in the paragraph and makes the text in the paragraph wrap around the button. Margin settings have also been added to add some space between the text and the button.

This makes it easier to read and more visually appealing. Notice that the CSS includes a class selector to target the button defined by the button class.

The button will only go as far to the left as the image and its margin settings allow. Take a look below. Table of Contents. Save Article. Improve Article. Like Article. Last Updated : 05 Nov, Previous CSS Overflow.

Next CSS Align. Recommended Articles. How to validate if input in input field has float number only using express-validator? Article Contributed By :.

Easy Normal Medium Hard Expert. Writing code in comment? To learn more about clearing float see tutorial on CSS Alignment. Is this website helpful to you? Please give us a like , or share your feedback to help us improve. Connect with us on Facebook and Twitter for the latest updates. Value Description left The element floats on the left side of its containing block. Example Try this code ».