CSS Floats
Tags: beginners, css
Published: 2019-11-15 20:50:15

---
title: CSS Floats
published: true
description: A beginners guide to CSS Floats
tags: beginners, css,
series: FrontEnd Development Zero to Hero 
---
HTML elements appear in their default order on a web page. Block level elements appear vertically and inline elements appear horizontally.

We learnt about [CSS positioning](https://dev.to/ziizium/css-positioning-34d8) that allow us to position block level elements using `position` property values like `relative`, `absolute` e.t.c Using these values we can completely remove an element from the normal page flow and place it anywhere we want either in its parent container or relative to the viewport (the available browser window) using offset properties like `top`, `right`.

But, there is one other CSS property that's used to position elements. It's name  is `float`, and this property allow us to position block elements _side&#x2014;by&#x2014;side_ instead of on top of each other (their default behavior). Armed with this knowledge,  we can start getting a perspective on how to create layouts which can include sidebars and even newspaper style layout where the image is on the left and text appear on the right.

_The following snippets will be used in this post with slight modifications along the way. Please save the snippets with the `.html` and `.css` extension respectively and make sure the CSS file is linked with the HTML. Remember all HTML snippets should be placed between the start and closing `body` tag in your HTML_.

```html
<div>
  <span class="s-1">Lorem ipsum dolor sit amet, consectetur.</span>
  <span class="s-2">Lorem ipsum dolor sit amet, consectetur.</span>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
```
```css
div {
  border: 5px solid #1560bd;
  padding: 1.2em;
  width: 70%;
  margin: 0 auto;             /* This will center the div element */
}

span {
  font-weight: bold;
  border: 5px solid red;
}
```

_And kindly note that all screenshots are from <b>Firefox 70</b> web browser and its Developer Tools._

With that out the way, let's start.

<hr>

When an element is floated, it is removed from the normal flow of the page though it still remain part of the flow.

Unlike positioning techniques, a floated element is placed on the left or right until it touches the edge of its containing box, or another floated element.

The `float` property can accept the following values:

* `left` &#x2014; The element must float on the left side of its containing block.
* `right` &#x2014; The element must float on the right side of its containing block.
* `none` &#x2014; The element must not float.
* `inline-start` &#x2014; The element must float on the start side of its containing block. That is the left side with ltr (left to right) scripts, and the right side with rtl (right to left) scripts. This is similar to `left`.
* `inline-end` &#x2014; The element must float on the end side of its containing block. That is the right side with ltr (left to right) scripts, and the left side with rtl (right to left) scripts. This is similar to `right`.

Let's demonstrate these values. Load your HTML in the browser, your output should be similar to the image below.

![A text with red and blue borders](https://thepracticaldev.s3.amazonaws.com/i/m2dk3zqm3tglro3kl7ws.png)

The `span` elements are highlighted in red so you can note their position when we apply the `float` property.

Add the following to your CSS:

```css
  .s-1 {
    float: left;
  }
```

Save and refresh your browser.

![A text with red and blue borders](https://thepracticaldev.s3.amazonaws.com/i/vb17om4vx6gir5qsnfa6.png)

From the image above, you will realize the left floated element just moves down a little bit. This is one of the characteristics of a floated element.

The [specification]( https://www.w3.org/TR/CSS2/visuren.html#float-position) states:

> If there is not enough horizontal room for the float, __it is shifted downward__ until either it fits or there are no more floats present.

When the element was floated, there was not enough room due to the parents width and thus it moves down.

Now let's move the second `span` element. Add this to your CSS:

```css
  .s-2 {
    float: right;
  }
```

Save and refresh your browser.

![A text with red and blue borders](https://thepracticaldev.s3.amazonaws.com/i/quqzwe94xeyol5zkri54.png)

If you observe the image above, you'll notice there is a piece of the paragraph text in between the floated elements (the span elements). Why is this? The specification to the rescue.

The [specification states]( https://www.w3.org/TR/CSS2/visuren.html#float-position) ( emphasis mine ):

> The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side (or be prohibited from doing so by the `clear` property). __Content flows down the right side of a left-floated box__ and __down the left side of a right-floated box__.

This is why we have that tiny part of the text between the floated elements. If you were to replace the span elements with images, you will see the same effect.

Try and replicate the output in the image below.

![A web page with two floated images to the left and right](https://thepracticaldev.s3.amazonaws.com/i/xvncrebp2dzzx84xbsm3.png)

When an element is floated it is __placed as high as possible__. Add the following to your CSS:

```css
p {
  border: 3px solid gold; /* just a cosmetic */
}
```

Save and refresh.

![A text with red and blue borders](https://thepracticaldev.s3.amazonaws.com/i/rxjp6nf04qzbw1qkeq2u.png)

It's evident from the image that the paragraph border overlaps with the `span` border. But this does not prove the floated element __is high as possible__.

__Delete__ the `padding` property from your the `div` element and refresh your browser.

You'll realize the borders of the `span` element are touching the border of their parent element.

![A text with red and blue borders](https://thepracticaldev.s3.amazonaws.com/i/9p1zgb0aemmcwvt7y5a8.png)

###__CONTROLLING FLOW NEXT TO FLOATS__

From our previous image, a tiny part of the paragraph text is stuck between the floated elements, we can take care of this using the `clear` property.

The [Specification states]( https://www.w3.org/TR/CSS2/visuren.html#flow-control):

> The `clear` property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box.

This means if a floated element is near a non-floated element, we can supply the `clear` property value to the non-floated element with a value that will indicate which part of the non-floated element should the floated element stay away from. What the?

I am sorry, that was the best translation i could come up with. The subsequent example should clear things up.

The values we can supply to the `clear` property include:

* `left`
* `right`
* `both`
* `none`

####__`left`__

From the specification:

>  Requires that the top border edge of the box be below the bottom outer edge of any left-floating boxes that resulted from elements earlier in the source document.

This translates to: The top part of the non-floated element should appear below the bottom part of any element that has it's float value set to `left`. 

####__`right`__

This is analogous to `left` but for right floated element.

####__`both`__

This replicates the behavior of the `left` and `right` at once.

####__`none`__

The floated element will behave as normal and the non-floated element will appear either on the right or left of the floated element depending on the `float` value.

Now, lets clear some floats!.

Update your `p` CSS rule with the following:

```css
p {
  /* All other properties remain the same */
  
  clear: left; /* Add this */
}
```

Save and refresh your browser. The paragraph text will no longer appear between the floated elements.

![A text with red and blue borders](https://thepracticaldev.s3.amazonaws.com/i/dalr114ht9w9m2mv3esf.png)

The reason this works for both floated elements is because we have a single paragraph in the entire parent element. To test other `clear` values, try the following:

* Add another paragraph before both span elements
* Give the paragraph a class attribute with any valid name
* In your CSS file, delete  the `p` element CSS rule
* Using the same class name in HTML, create a new CSS rule
* Add some cosmetics so that you can see the effect of the float
* Add a `clear` property with a value of `left`

Your result should be similar to the image below:

![A text with red and blue borders](https://thepracticaldev.s3.amazonaws.com/i/qo6emqxkse5a9z7pei1r.png)

Its evident that the paragraph with the `clear: left` moves up, but the other paragraph still wraps around the floated element.

Floats have a close relationship with our next topic: _CSS Block Formatting Context_.