CSS Float: Learn to Make Elements Float to the Left or the Right

Making Elements Float

Elements with CSS float property affect the layout of other elements. The text content and images surround floated elements.

In the example, you see CSS float in action:

.float-box {
    float: left;
    width: 200px;
    height: 100px;
    margin: 20px;
    border: 5px solid black; 
}  
	
.other-box {
   clear: left;
}

If you have several HTML elements inside one container, you need to determine how they float.

The float CSS property is commonly used for wrapping text around images. However, it can be utilized for other elements too.

There are four possible values for the CSS float property: 

• left: elements float on the left side.
• right: elements float on the right side.
• none: elements do not float.
• inline-start: elements float on the start side of the containing block.
• inline-end: elements float on the end side of the containing block.

The example below makes CSS float images to the left of the text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu eros eu arcu posuere rutrum vitae in magna. Sed et quam sit amet arcu tempor imperdiet at nec mauris. Mauris facilisis pretium velit, at sodales justo interdum vel.

img {
   float: left;
}

The example below makes an image float to the right of the text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu eros eu arcu posuere rutrum vitae in magna. Sed et quam sit amet arcu tempor imperdiet at nec mauris. Mauris facilisis pretium velit, at sodales justo interdum vel.

img {
   float: right;
}

The example below prevents the element from floating:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu eros eu arcu posuere rutrum vitae in magna. Sed et quam sit amet arcu tempor imperdiet at nec mauris. Mauris facilisis pretium velit, at sodales justo interdum vel.

img {
   float: none;
}

Imitating float: center

There is no property called CSS float: center. However, you can use a combination of properties to reach a similar result.

One option is to use display: flex and justify-content: center:

.example1 {
  width: 100%;
  height: 100%;
  border: 2px solid #cc3f85;
  display: flex;
  justify-content: center;
}

.example2 {
  width: 50%;
  border: 2px solid #66d9ef;
}

Controlling Overflow

If the floating element is taller than the element containing it, then the floating element steps out of its container. You can fix this issue with the overflow property. Paired with an auto value, it stretches the container to be big enough for the floating element.

In the example, we fix the overflow problem using the overflow:auto method:

Without overflow: auto

With overflow: auto

.clearfix {
    overflow: auto;
}

Note: the overflow property is not specifically designed for clearing floats. Use it carefully to avoid unwanted results.

The following method is preferred over the overflow:auto way of fixing this issue. It adds hidden content after the parent element (it clears the float).

Most modern websites use this strategy:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

CSS Float: Useful Tips

• The CSS float property does not work if elements have display: none.
• If the float property has inherit value, the element receives the float value from its parent.