Float left word wrap

Imagine a print magazine. Flipping through the pages, you see text and images laid out in different ways. Maybe there’s an image at the center with text all around it. Maybe there’s an image to the left of the intro paragraph. Maybe there’s an image with text overlaid on top of it.

Mostly, though, you’ll see text wrapped around images. This makes it easier to see both the text and the images while limiting the amount of white space on the page.

Like print designers, web designers need a solution for making text wrap around an element in a layout — this ensures they maintain the flow of the page while maximizing space.

That solution is the float property in CSS. In this post, we’ll look at what float is and what it does in CSS. Then we’ll explore how to use — and clear — the property. Let’s get started.

The float property can be specified with any of the following values:

• none (default): The element doesn’t float. It is simply displayed where it occurs in the text.
• left: The element floats to the left of its container.
• right: The element floats to the right of its container.
• inherit: The element inherits the float value of its parent.

Notice that there are no property values for center, top, and bottom. That’s because you can’t float elements to the center, top, or bottom of a container — only left or right.

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.

Now that we understand the basics of the CSS float property, let’s take a closer look at how it works.

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.

Now that we understand how the float property works, let’s look at how to use it in CSS.

To use float in CSS, you only need a CSS selector and the defined float property inside the brackets. So the syntax would look something like:

 
element { float: value; }

While float will function properly on its own, you’ll often see it combined with margin properties. Creating space around the floated elements can help improve the appearance of the layout.

CSS Float Examples

Now, let’s look at some specific use cases of the float property.

How do you float an image in CSS?

Let’s say you want an image to float to the right of the text in a container. You can use a type selector to target the image and define it with the rule float: left or float: right.

Here’s the CSS:

 
img { float: right; }



  


                       
  

Here’s the HTML:

 
<h2>CSS Float Property: Right Value</h2>
<h2>CSS Float Property: Right Value</h2>
<p><img src='https://images.unsplash.com/photo-1613535449480-bb56b88d1886?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNzgwNzU4MA&ixlib=rb-1.2.1&q=80&w=400' alt='surfer holding a surfboard walking in the ocean'>In this example, the CSS float property is defined by the right value. 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.</p>

Here’s the result:

See the Pen CSS Float Property: Right Value by Christina Perricone (@hubspot) on CodePen.

Compare how the image appears on the page below when the float property is not applied.

See the Pen CSS Float Property: None by Christina Perricone (@hubspot) on CodePen.

How do you float other HTML elements in CSS?

As mentioned earlier, any HTML element can be floated in CSS, not just images.

Let’s say you want a button to float to the left of the text in a container. You can use a class selector to target the button class and define it with the rule float: left or float: right. You’ll also see CSS rules defining the color, size, border, padding, and margins of the button.

Here’s the CSS:

 
.button {
float: left;
background: gray;
font-size: 48px;
color: white;
padding: 3px;
border-radius: 5px;
border: 3px solid black;
margin-right: 10px;



  


                       
  




}

Here’s the HTML:

 
<h2>CSS Float Property: Button</h2>
<p><button class="button">Click me!</button>In this example, the CSS float property is defined by the left value. 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.</p>

Here’s the result:

See the Pen CSS Float Property: Button by Christina Perricone (@hubspot) on CodePen.

How do you float multiple elements in CSS?

Now let’s say I want to float both elements — the image and button — to the left. The button will only go as far to the left as the image (and its margin settings allow). Take a look below.

Here’s the CSS:

 
.button {
float: left;



  


                       
  




background: gray;
font-size: 48px;
color: white;
padding: 3px;
border-radius: 5px;
border: 3px solid black;
margin-right: 15px;
}
img {
float: left;



  


                       
  




margin-right: 15px;
width: 70px;
height: 70px;
}

Here’s the HTML:

 
<h2>CSS Float Property: Multiple Elements</h2>
<p>
<img src='https://images.unsplash.com/photo-1613535449480-bb56b88d1886?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNzgwNzU4MA&ixlib=rb-1.2.1&q=80&w=400' alt='surfer holding a surfboard walking in the ocean'>
<button class="button">Click me!</button>
In this example, the CSS float property is defined by the left value. 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.



  


                       
  




</p>

Here’s the result (note: You may need to zoom out to 0.5x to see the full effect.)

See the Pen CSS Float Property: Multiple Elements by Christina Perricone (@hubspot) on CodePen.

How to Clear the Float Property in CSS

While useful, the float property can cause layout issues. Consider what happens if a containing element, like a <div> element, is too small to contain the floated element. When this happens, the floated element will extend beyond the bounds of its containing element and disrupt other parts of your page.

Issues like this can be fixed using the clear property in CSS. This property lets you «clear» floated elements from the left side, right side, or both sides of an element.

The clear property can be specified with any of the following values:

• none (default): Floating elements are allowed on both sides of the cleared element.
• left: No floating elements are allowed on the left side of the cleared element.
• right: No floating elements are allowed on the right side of the cleared element.
• both: No floating elements are allowed on either side of the cleared element.
• inherit: The element inherits the clear value of its parent.

Most commonly, you’ll apply the clear property to an element that comes immediately after a floated element. Say you want to clear the float to the left (in other words, you don’t want any floating elements on the left side of the defined element). Then, you need to match the clear to the float.

So if the element is floated to the right, then the following element should be cleared to the right. That way, the floated element will float to the right and the cleared element will appear below it.

Consider this example — notice that div 2 comes after div 1 in the HTML. However, since div 1 floats to the right, the text in div 2 flows around div 1.

See the Pen CSS Float Property: Without Clear by Christina Perricone (@hubspot) on CodePen.

To keep the text in div2 from flowing around div1, you can use the clear property, which moves div 2 below the right-floating div 1. Here’s the result:

See the Pen CSS Float Property: With Clear by Christina Perricone (@hubspot) on CodePen.

Using Floated Elements in Your Design

Understanding how to use and clear the float property in CSS can help you create clean layouts that delight your visitors. You’ll just need some knowledge of HTML and CSS to master this property.

Editor’s note: This post was originally published in May 2020 and has been updated for comprehensiveness.