CSS Float Property - Main Purpose

This article is part of a CSS Layout course that you can take with us to learn how to create CSS Layouts using HTML and CSS float layout technique. This post will make sense to you the most if you watch the accompanying videos described in the course description at the end of this post. You might still be able to find useful information in this post even if you don't take the course but that's primarily not the goal of this post.

The CSS Float property was originally designed in CSS to float text blocks around images on websites, basically the same phenomenon that happens in newspapers: you usually see a column or block of text flowing around an image.

Later on, web designers used float as  a technique to create website layouts, for example two columns beside each other horizontally. In this post we're going to talk about the the original purpose of float, namely, floating text around images.

Let's say you have the following website: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>PAGE TITLE</title>
    <meta name="description" content="">

    <style>

    </style>
</head>
<body>
  <main role="main">
    <p><img src="html5Image.jpg" width="150" height="101">First paragraph It is a long established
    fact that a reader will be distracted by the readable content of a page when looking at its layout.
    The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters,
    as opposed to using 'Content here, content here', making it look like readable English.</p>
    
    <p>Second paragraph Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
    printer took a galley of type and scrambled it to make a type specimen book. It has survived 
    not only five centuries, but also the leap into electronic typesetting, remaining essentially
    unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem
    Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including
    versions of Lorem Ipsum.</p>
  </main>
</body>
</html>

Here's a browser shot of the code in Firefox: 

CSS Float Property Image - Browser Shot - Stage 1
CSS Float Property Image - Browser Shot - Stage 1

Now let's float the image to left. The code will be changed like the following: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>PAGE TITLE</title>
    <meta name="description" content="">

    <style>
      main img { float: left; }
    </style>
</head>
<body>
  <main role="main">
    <p><img src="html5Image.jpg" width="150" height="101">First paragraph It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
    <p>Second paragraph Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </main>
</body>
</html>

Please note that in the code snippet above, the only thing that has changed is a single line of CSS added to the "style" section that says, "float: left;" implemented on the "img". 

And here's a Firefox screenshot of the code:

CSS Float Property Image - Browser Shot - Stage 2
CSS Float Property Image - Browser Shot - Stage 2

As you can see, everything, essentially the two paragraphs (you could say everything on the page) has wrapped around the image. 

Now, let's float the image to right. To do so, the only change that we have to make to the code is change "float: left;" to "float: right;" as done below. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>PAGE TITLE</title>
    <meta name="description" content="">

    <style>
      main img { float: right; }
    </style>
</head>
<body>
  <main role="main">
    <p><img src="html5Image.jpg" width="150" height="101">First paragraph It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
    <p>Second paragraph Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </main>
</body>
</html>
CSS Float Property Image - Browser Shot - Stage 3
CSS Float Property Image - Browser Shot - Stage 3

And the same thing happened this time as well, except the image is on the right side of the viewport now. 

Now let's give some margin to the left side and the bottom of image so that there's some space between the text and image.

Moreover, let's get the second paragraph to begin from below the image, meaning, only the first paragraph wraps around the image. 

Both the steps are going to be done in the code snippet below.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>PAGE TITLE</title>
    <meta name="description" content="">

    <style>
      main img {
        float: right;
        margin-left: 10px;
        margin-bottom: 10px;
      }
      main p#second-paragraph {
        clear: both;
      }
    </style>
</head>
<body>
  <main role="main">
    <p><img src="html5Image.jpg" width="150" height="101">First paragraph It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
    <p id="second-paragraph">Second paragraph Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </main>
</body>
</html>
CSS Float Property Image - Browser Shot - Stage 4
CSS Float Property Image - Browser Shot - Stage 4

For the margins, you can see in the code that, margin-left and margin-bottom have been given to the "img". 

In order to get the second paragraph to start from below the floated image, we had to "clear" it. "clear" is CSS jargon to just do that. We have given an id to the second paragraph so that we could select it in CSS and then given it the CSS declaration, "clear: both;". 

That is basically the main purpose of the CSS "float" property, to have text wrap around images. As mentioned before, "float" has widely been used as a well-known technique to create multi-column layouts in CSS. We'll learn this in detail in this course.

As mentioned before, this post is part of the documentation section of a CSS Layout course. In this course, you can learn how to create flexible layouts using the "float" CSS property. You can take this course with us at the following address: