Web Development basics for ASP.NET Developers – Floating

One of the interesting and powerful ways you can affect normal flow using floats. A floated element is removed from the normal flow and shifted towards either right or left edge of the containing block as far as it can go. When the width is not enough the floated element box wraps below the first row of floated elements.

float:left

Left Float

An example of float left. See how the text content flows around the right edge of the left floated element. See how the line boxes are shortened, more on that later. Float left thus shifts element from normal flow and moves it as much left as possible.

float:right

Right Float

An example of float left. See how the text content flows around the left edge of the right floated element. See how the line boxes are shortened, more on that later. Float left thus shifts element from normal flow and moves it as much to the right as possible. Next we will see what happens when there are multiple floats.

Multiple floats

Right Float 1

Right Float 2

Right Float 3

Right Float 4

Multiple floats, See how the 4 the div is pushed down as the width is used by this text content and the other elements in the first row. The same applies to left floated content as well. Next we will see what if a float’s height exceeds the containing block’s height.

What happens when a float’s height exceeds the containing block’s hieght

Left Float where height exceeds that of the container. I have also removed the float’s background here.

In this example the float’s height exceeds the containing block’s height.

How block level elements after the float are affected by the float

Left Float where height exceeds that of the container. I have also removed the float’s background here.

In this example the float’s height exceeds the containing block’s height.

Let us say that this paragraph should have been below the left float as per our requirement. Notice how the first line box is still shrunk. More on line box later.

Clearing

Left Float where height exceeds that of the container. I have also removed the float’s background here.

In this example the float’s height exceeds the containing block’s height.

Now this paragraph is actually beginning below the left float as per our requirement. This is the power of clear. clear: left doesn’t allow any element to float to the left of the element box, right doesn’t allow any element to float to the right of the element box and both doesn’t allow elements to float on both left and right

Line box shortening

Left Float

Notice how the background of this paragraph is bleeding into the floating element as well. But the text doesn’t bleed into the floating box. That’s because the anonymous boxes for each line of content inside of the block level box of this paragraph (called line boxes) are shortened

Use your favorite browser’s development tools to view the markup

Read the following articles for a better understanding of floats:

CSS Floats 101

Web Design 101: Floats

Autistic Cuckoo on Float Layouts (via the Internet Archive)