CSS Floats 101

The float property is a valuable and powerful asset to any web designer/developer working with HTML and CSS. Tragically, it can also cause frustration and confusion if you don’t fully understand how it works. Also, in the past, it’s been linked to some pretty nasty browser bugs so it's normal to get nervous about using the float property in your CSS rule sets. Let’s calm those nerves and ease that frustration. I’ll show you exactly what the float property does to your elements and how incredibly useful it can be once you master it.

We see floats in the print world every time we pick up a magazine article with an image on the left or right with text flowing nicely around it. In the world of HTML/CSS, text will wrap around an image with the float property applied to it, much like in a magazine layout. Images are just one of the many use cases for the float property: we can also achieve the popular two-column layout using floats. In fact, you can float just about any element in your HTML. By learning and understanding float property basics, along with position property basics, you will be able to achieve any layout with confidence.

The definition

Let’s start with the definition of a float. According to the W3C:
A float is a box that is shifted to the left or right on the current line. 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.

The float property has four values that we can apply to it: left, right, inherit, and none. Each value is pretty self explanatory. For example, if you assign float: left to an element, it will move to the left-most boundary of its parent element. The same idea applies if you were to assign float: right; to an element. That element would be sent off to the right-most boundary of its parent element. The inherit value tells an element to inherit the float value of its parent element. The value none is the default value and tells an element not to float at all.

Here is a simple example like the magazine reference above, Example A and the corresponding markup:

img {
float: right;
margin: 10px;
}

How floats behave

Nothing too complex, but still pretty cool right? Child’s play you say. Ok, well before we get into the part where floats usher in a world of bacon-loving unicorns, let’s back up for a second to talk about what’s actually happening here. In the web world, our HTML is bound by some rules, in particular, the normal flow. In the normal flow, each block element (div, p, h1, etc.) stacks on top of each other vertically, from the top of the view port down. Floated elements are first laid out according to the normal flow, then taken out of the normal flow and sent as far to the right or left (depending on which value is applied) of the parent element. In other words, they go from stacking on top of each other to sitting next to each other, given that there is enough room in the parent element for each floated element to sit. This behavior is crucial to remember as you build your websites.

Let’s look at a few more examples. In Example B, there are three blocks without the float property applied:

.block {
width: 200px;
height: 200px;
}

Notice how they stack on top of each other? This is the basic concept of normal flow. Here is the same example again, but this time the blocks are all floated in Example C:

.block {
float: left;
width: 200px;
height: 200px;
}

Now the blocks are sitting side by side. Great, we’ve got that figured out. But what about that part where I said “given there is enough room in the parent element for each floated element to sit?” I thought you’d never ask. Let’s take our last example and increase the box count five fold. The parent element in this example is the body of our document. Notice that depending on the size of your browser window (and subsequently the parent element body), the blocks drop to a second row, because there is not enough room for all of them to sit side by side. As you resize your browser window to allow more room, you’ll see the blocks rearrange themselves. Try it for yourself, in Example D.

In the clear

The float property has a step-brother, clear. The two complement each other in a way that should make you a happy coder. As you may recall, a floated element is first laid out according to the normal flow, then removed from the normal flow. This means that every element that follows a floated element will behave contrary to what you expect. This is where I suspect we might start to get into trouble. Let’s look at a quick example with our blocks again. In Example E, I am going to float two blocks (pink and blue) and directly after those, not float two more blocks (green and orange).

Here is the HTML and CSS for Example E:

.block {
width: 200px;
height: 200px;
}
.float { float: left; }
.pink { background: #ee3e64; }
.blue { background: #44accf; }
.green { background: #b7d84b; }
.orange { background: #E2A741; }

How do you like that green block? Oh wait, where is it? It’s there, right underneath the pink block. The pink and blue blocks are both floated and behaving as we would expect, sitting side by side. Since they’re removed from the normal flow however, the green and orange blocks act as if they’re not even there. That is why our green block is hidden undereath our pink block. So how do we make our green block show up again? Enter the clear property.

The clear property has five values available: left, right, both, inherit, and none. Assigning a value of left says the top edge of this element must sit below any element that has the float: left property applied to it. The same concept applies for the right value—the element must sit beneath any element that has the float: right property applied to it. Using the both value tells our element that its top edge must sit below any element floated either left or right. The inherit value takes on the clear property from its parent element, while the default value none behaves as you would expect. Arming ourselves with this knowledge, let's look at Example E2. This time we’ll clear our two floats by applying the clear property to our green block.

Our slightly modified code looks like this:

.block {
width: 200px;
height: 200px;
}

.float { float: left; }
.clear { clear: left; }
.pink { background: #ee3e64; }
.blue { background: #44accf; }
.green { background: #b7d84b; }
.orange { background: #E2A741; }

By assigning a clear: left property value to our green block, we’ve told it to act as if the pink block is in the normal flow of our document, even though it has been removed, and to sit below it. This is an immensely powerful property; as you can see, it helps bring our non-floated elements back into the normal flow, a behavior that we tend to expect by default. That said, knowing and understanding both the float and clear property really starts to open some creative doors when you write your HTML and CSS.

information is shared by www.ideasroad.com