Picture 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 still 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.

Free Intro Guide to HTML & CSS [Download Now]

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

Note: I’ll be using the W3Schools Online Code Editor to create the examples below. You can click any of the Source links to see the full code snippet behind the example and try your own.

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

  • None (default): The element does not 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 the page — only left or right.

If you're using the development toolkit  Bootstrap CSS 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.

How to Use Float 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 the float property will function properly on its own, you’ll often see it combined with margin properties. Creating space around the floated elements often helps improve the appearance of the layout.

Let’s look at two specific use cases of the float property below.

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 float property: right.

Here’s the CSS:

 

 

   img {

  float: right;

}

Here’s the HTML:

 

 

   <h2>CSS Float Property: Right Value</h2>

 

<p><img src="pic_trulli.jpg" alt="Trulli" style="width:250px;height:170px;margin-left:15px;">

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:

image in paragraph with css float property

Source

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

image in paragraph without css float property

Source

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 float property: left. 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:

 

 

   <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:

Button element floated to the left

Source

How do you float multiple elements in CSS?

Now let’s say I want to float both elements — the image and button — 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:

 

 

   <p><img src="pineapple.jpg" alt="Pineapple">

<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:

Multiple elements (image and button) floated to the left

Source

How to Clear the Float Property in CSS

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 the 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 (ie. 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 left, then the following element should be cleared to the left. That way, the floated element will float to the left and the cleared element will appear below it.

Let’s consider this example from W3Schools.

Here’s the CSS:

 

 

.div1 {

  float: left;

  width: 100px;

  height: 50px;

  margin: 10px;

  border: 3px solid #73AD21;

}

 

.div2 {

  border: 1px solid red;

}

Here’s the HTML:

 

 

   <h2>Without clear</h2>

<div class="div1">div1</div>

<div class="div2">div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1.</div>

Here’s the result:

Floated div element not cleared to the left causing overlap

Source

To keep the text in div2 from flowing around div1, you can use the clear property.

Here’s the CSS:

 

 

.div1 {

  float: left;

  width: 100px;

  height: 50px;

  margin: 10px;

  border: 3px solid #73AD21;

}

 

.div2 {

  border: 1px solid red;

  clear: left;

}

Here’s the HTML:

 

 

   <h2>With clear</h2>

<div class="div1">div1</div>

<div class="div2">div2 - Here, clear: left; moves div2 down below the floating div1. The value "left" clears elements floated to the left. You can also clear "right" and "both".</div>

Here’s the result:

Floated <div> element cleared to the left

Source

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.

New Call-to-action

 css introduction

Originally published May 20, 2020 7:00:00 AM, updated May 20 2020

Topics:

Bootstrap CSS