How to Use CSS Float – A 5 Minutes Beginner’s Guide

Welcome to a beginner’s tutorial on how to use the CSS float property. The float property, probably one of the most annoying things to deal with in CSS. While it is seemingly simple on the surface – Either float to the left, to the right, or none at all… The results can often be the opposite of what you wanted.

Weird text placements, the structure of containers going haywire, layout getting destroyed. You name it. So just how do we properly control this “floating beast” in CSS? Let us walk through some examples of how it reacts in various situations. Read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

TABLE OF CONTENTS

Download & Notes CSS Float Useful Bits & Links
The End

 

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

BASIC FLOAT & CLEAR

All right, let us now start with some quick recap – The basics of float work, and how we can use the clear property to compliment floating elements.

 

1) FLOAT BASICS

1-float-basic.html
<style>
#demoA { background: #ffc6c2 }
#demoB { background: #d5ffc2 }
#demoC { background: #c2fff9 }
#demoA img { float: none }
#demoB img { float: left }
#demoC img { float: right }
</style>

 <!-- NO FLOAT -->
<div id="demoA">
  <img src="cate-ninja.jpg">
  <h1>NO FLOAT</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
 
<!-- FLOAT LEFT -->
<div id="demoB">
  <img src="cate-ninja.jpg">
  <h1>FLOAT LEFT</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

<!-- FLOAT RIGHT -->
<div id="demoC">
  <img src="cate-ninja.jpg">
  <h1>FLOAT RIGHT</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

Captain Obvious to the rescue. This one should be straightforward enough.

  • By default, images (and any block element) will occupy “one whole row” on its own without any float.
  • If we want the text to wrap around the image, we use float:left or float:right to reposition the image.

 

 

2) FLOAT VS ALIGN

2-align.html
<style>
#demoA { background:#ffc6c2 }
#demoB { background:#d5ffc2; text-align:left }
#demoC { background:#c2fff9; text-align: right }
</style>

 <!-- NO ALIGN -->
<div id="demoA">
  <img src="cate-ninja.jpg">
  <h1>NO ALIGN</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
 
<!-- ALIGN LEFT -->
<div id="demoB">
  <img src="cate-ninja.jpg">
  <h1>ALIGN LEFT</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
 
<!-- ALIGN RIGHT -->
<div id="demoC">
  <img src="cate-ninja.jpg">
  <h1>ALIGN RIGHT</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

One very common confusion among beginners is float and text-align. But as seen above, text-align simply flushes everything to the left or right – It will not wrap the text around the image.

 

3) USING CLEAR

THE FLOAT PROBLEM

3a-float-problem.html
<style>
#demoA { background:#d5ffc2 }
#demoB { background:#ffc6c2 }
#demoA img, #demoB img { float:left }
#demoA img { width:230px; height:230px }
</style>
 
 <!-- DIV CONTAINER WITH FLOATING IMAGE -->
<div id="demoA">
  <img src="cate-ninja.jpg">
  <h1>FLOATING IMAGE WILL STICK OUT OF CONTAINER</h1>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

 <!-- BOTTOM CONTAINER WILL GET "PUSHED UP" -->
<div id="demoB">
  <img src="cate-ninja.jpg">
  <h1>OH NO! LAYOUT OF BOTTOM SECTION IS DESTROYED</h1>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

Yep, float may seem cool at first, but it has a deep-seated potential problem. Some of you guys may have already encountered this before – The contents around the floating element will wrap around, and it simply destroys the layout of all the bottom sections.

 

 

CLEAR TO THE RESCUE

3b-clear.html
<style>
#demoA { background:#d5ffc2 }
#demoB { background:#ffc6c2 }
#demoA img, #demoB img { float:left; width:200px; height:200px }
#demoA p { clear:both }
</style>

 <!-- PARAGRAPH WITH CLEAR:BOTH -->
<div id="demoA">
  <img src="cate-ninja.jpg">
  <h1>PARAGRAPH BELOW HAS CLEAR BOTH</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

 <!-- PARAGRAPH WITHOUT CLEAR:BOTH -->
<div id="demoB">
  <img src="cate-ninja.jpg">
  <h1>WITHOUT CLEAR</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

To fix the problem of overly large floating elements, we can add clear:both to the last paragraph. In layman terms, it means “no floating elements allowed on both sides of the paragraph” – This will effectively stop the floating image from sticking out of the parent <div>, preventing awkward layouts.

 

CLEAR FIX

3c-clearfix.html
<style>
.clearfix { overflow: auto; }
.clearfix::after { content: ""; clear: both; }
#demoA { background:#d5ffc2 }
#demoB { background:#ffc6c2 }
#demoA img, #demoB img { float:left; width:230px; height:230px }
</style>

<div id="demoA" class="clearfix">
  <img src="cate-ninja.jpg"/>
  <h1>CLEAR FIXED</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

<div id="demoB" class="clearfix">
  <img src="cate-ninja.jpg"/>
  <h1>THIS TOO.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

The above works, but the paragraph now breaks off into a new line on its own… Which is not what we want in the first place. So here is a traditional solution that code ninjas have used for generations – The “clear fix”.

 

 

4) MULTIPLE FLOATING ELEMENTS

THE COLLAPSED CONTAINER

4-float-many.html
 <style>
.clearfix { overflow: auto } 
.clearfix::after { content: ""; clear: both } 
.container { background:#d5ffc2 }
.apple { float:left; background:#ffd6d6 }
.banana { float:right; background:#d6fffd }
.cherry { float:left; background:#f7ffd6 }
</style>

<div class="container">
  <div class="apple">Apple</div>
  <div class="banana">Banana</div>
  <div class="cherry">Cherry</div>
</div>

Images are not the only thing that can float – Yes, we can float pretty much anything and technically any number of elements… But the important thing to take note of is the order of the elements. Notice how the elements are being processed from the HTML in a top-down manner?

  • Apple will go first and float to the left.
  • Banana goes next and float to the right.
  • Cherry will go finally and float to the left.

Also, the next characteristic to take extra note is that a container with all floating child elements will “collapse” to height: 0.

 

CLEAR FIX AGAIN

Why is this “collapse” bad? Remember from all the above examples that a collapsed container will cause layout problems? Thankfully, the fix is as easy as… clearfix.

4-float-many.html
<div class="container clearfix">
  <div class="apple">Apple</div>
  <div class="banana">Banana</div>
  <div class="cherry">Cherry</div>
</div>

 

 

5) PAGE LAYOUT USING FLOAT

5-float-layout.html
<style>
.clearfix { overflow: auto } 
.clearfix::after { content: ""; clear: both } 
#phead { background: #ffdbdb }
#pmain, #pside { float: left }
#pmain { background: #e8ffdb; width: 70% }
#pside { background: #dbf5ff; width: 30% }
#pfoot { background: #fbdbff; }
</style>
 
<header id="phead">PAGE HEADER</header>
 
<div class="clearfix">
  <div id="pmain">MAIN CONTENTS</div>
  <div id="pside">SIDEBAR</div>
</div>
 
<footer id="pfoot">PAGE FOOTER</footer>

Yes, the smart code ninjas should have realized by now – We can use float to layout the webpage itself. It has actually been around for a long time, and this is the “traditional way” to do the layout of web pages.

But the times have changed, avoid using float to do page layout. Look into flex and grid instead – These are the modern alternatives and much easier to understand. I shall leave links to more tutorials in the extra section below.

 

 

USEFUL BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

 

LINKS & REFERENCES

 

INFOGRAPHIC CHEAT SHEET

How To Use CSS Float & Clear (click to enlarge)

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

1 thought on “How to Use CSS Float – A 5 Minutes Beginner’s Guide”

Leave a Comment

Your email address will not be published. Required fields are marked *