🚨 Time is Running Out: Reserve Your Spot in the Lucky Draw & Claim Rewards! START NOW

Code has been added to clipboard!

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

Reading time 3 min
Published Nov 2, 2016
Updated Jan 21, 2020

TL;DR — The CSS float property is for positioning elements to the left or the right side of their containers. Differently than position property, the floated element stays as a part of the flow of the page.

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

Example
.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.

CSS Float

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.

Example
img {
   float: left;
}

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

CSS Float

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.

Example
img {
   float: right;
}

The example below prevents the element from floating:

CSS Float

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.

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

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

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

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

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

CSS FloatIn this example, the image is taller than the element containing it, and it is floated, so it overflows outside of its container.

With overflow: auto

CSS FloatAdd a class with overflow: auto; to the containing element, to fix this issue.

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

Example
.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.