aLemmer

Problem

I was asked by one of my readers to define the difference between floating elements and inline elements, vis-a-vis, display: inline v.s. float: right or float: left.

Solution

To give a clear juxtaposition I’ll define exactly what everything is. Although, if you know your basic elements you might as well jump to the example.

Inline-level & block-level

Most elements in HTML are either inline-level or block-level elements. The difference between the two being: an inline-level element will be in-line with another element. An example of such would be <span>, <em>, <strong> or <a>. A block element would be the opposite of such, being elements such as <div>, <p> or <ul>.

An easy rule to remember is that block-level elements usually start in a new line, whereas inline-level elements do not.

Floating elements

Quite simply, as stated by 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.

A clear example

This sentence is within a block level element (paragraph). This sentence is within the paragraph, but is also within an inline-level element (emphasis).

1
2
3
4

<img src="http://www.alemmer.com/wp-content/uploads/2009/06/lupin-150x150.jpg" alt="An Example of Float: Left" width="150" height="150" style="float: left"/>
<p>
 This sentence is within a block level element (paragraph). <em>This sentence is within the paragraph, but is also within an inline-level element (emphasis)</em>.
</p>

The image is an example of a floating block-level element, whereas the text exemplifies both inline-level and block-level elements.