This section describes how boxes are laid out in the normal document flow. It applies to elements whose float property has the value none, and whose position property has the value static or relative, although in the latter case, additional factors described in Relative Positioning must be taken into consideration.

As we already saw in CSS Layout and Formatting, just as there are block-level elements and inline elements in HTML, CSS boxes are also either block or inline (although there are subtypes of each), as determined by the element’s display property value.

The values 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.

The value run-in is special, because it 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.

The value inline-block 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.

The value none is a special case, because an element with this display value will not generate any sort of box at all. 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.