Block formating contexts, ‘hasLayout’ – IE Window vs CSS2.1 browsers: simulations.

The ‘hasLayout’ proprietary property in Internet Explorer for Windows (sort of) [note 1] establishes a new block formatting context [note 2]. This has implications for the behaviour of elements in certain cases. A number of CSS 2.1 properties (enumerated in CSS2.1:9.4.1) such as display: table (see also 17.2: the CSS table model) and display:table-cell, the overflow property when set to hidden, scroll or auto and display:inline-block also establish a new block formatting context, and behave in a similar way as IE for Windows. Below are a number of simple tests intended to illustrate this.

Demos and testcases

  1. margin collapsing: block formatting context with display:table
  2. margin collapsing: block formatting context with display:inline-block
  3. margin collapsing: block formatting context with the overflow property
  4. block formatting context adjacant to floated blocks: using display:table
  5. block formatting context adjacant to floated blocks: using the overflow property
  6. block formatting context adjacant to floated blocks: using display:inline-block
  7. block formatting context adjacent to floated blocks: using display:table-cell
  8. containing floats: block formatting context with display:table
  9. containing floats: block formatting context with the overflow property

It is important to emphasize it: those are similarities; ‘hasLayout’ only superficially mimics those CSS 2.1 properties. For some more details and a background on those tests, see Georg Sørtun's analysis.

Summary: new block formatting contexts.

Notes
  1. In his explanation of the ‘hasLayout’ concept, Markus Mielke notes the following:

    Elements that do have layout may establish a new block formatting context (9.4.1 in the CSS 2.1 spec)

  2. Zoe Gillenwater has written a nice introduction on this suject.
  3. The quoted text (part of section 9.5) from the specs changed per discusions on the www-style mailing list: see this message to www–style by Bert Bos for the references.

Last modified: May 24 2010 03:25:38 GMT.