When we mention designing we cannot fail to mention formatting. This is basically due to the fact that formatting is really an integral part of web designing. This humble work will try to guide you through your journey on understanding CSS formatting with particular emphasis on few of the most significant concepts in CSS formatting.

How Boxes Are Applied in the Normal Document Flow

This particularly applies to such elements where there are no specified values for float elements with position set at either static or relative. In case of relative positioning however we need to delve on some more on other factors not considered in the case of static positioning.
As we have already observed in CSS Layout and Formatting, just as there are block-level elements and inline elements in HTML, there are also block or inline in CSS boxes. This is identified by the element’s display property value.
There are indeed values that are very relevant to our discussion on CSS boxes as they are the very reasons why you have block boxes and formatting context for your CSS boxes. These values are: block, list-item, and table will cause an element to generate a block box and participate in a block formatting context.

Other values, such as inline and inline-table, cause elements to generate inline boxes, which participate in an inline formatting context.

In CSS boxes there are also special values like that of the run-in boxes. This is because they can make the generated box’s formatting either block or inline. A run-in box that doesn’t contain a block box, and is followed by a sibling block box in the normal document flow, becomes the first inline box of the sibling block box (unless the sibling is or contains a run-in). Otherwise, the run-in box becomes a block box. Run-in boxes are mainly intended for run-in headings. See display for more information about run-in and browser support.
There is also value that allows you in making inline box. This is commonly known as inline-block which generates a block box that’s laid out as an inline box. On the inside, the box is a block box, but on the outside, it’s an inline box. Similarly, the value inline-table generates a table that’s laid out as an inline box.

If don’t want any box at all whatsoever, this can be very conveniently by setting the value to none. This means that no descendant element will be able to generate a box. It’s important to note that applying the value none isn’t the same as using an invisible box; if you use none, no box will be generated at all.
Elements whose position properties have the value absolute or fixed are laid out in a very different fashion, as are floated or cleared elements.
An absolutely positioned or floated element will, however, establish a new containing block and formatting context for its static children.
The foregoing details are envisioned to give you a mere introduction on the concept of CSS formatting especially CSS boxes. For more details on these matters you can check out http://reference.sitepoint.com/css/formattingcontext.

Tags: The Ins and Outs of CSS Formatting Concepts