##hasLayout 是何方神圣

###为什么会出现一个叫 hasLayout 的家伙？

MSIE has quite dated rendering engine (not surprising, as IE is based on Mosaic). In old tabular times, almost any element (except inline content) was a box. There was no way for content to leak from containing table cell, or for table cell to leak out of table..

Many years have passed, and Microsoft began adapting archaic Trident engine to make use of CSS. However, CSS changes the fundamental assumption that old engine was based on - the one that “anything significant” is a rectangle that contains all its content. CSS allows content to overflow out of container. This may happen when content is floated, or if content is too tall/wide to fit inside constrained box.

### “having a Layout” 意味着什么？

In short, having a layout means that an element is responsible for sizing and positioning itself and possibly any child elements. (If a child element has its own layout, it sizes itself and its descendents, but the original layout positions the child.)

Some elements have a “fixed” size or otherwise have special sizing constraints. They always have layout—for example, buttons, images, inputs, selects, and marquee elements have always a native size even if width and height are not specified.

Sometimes elements that do not normally require layout information, like a div or a span, may have properties specified that force a layout to be applied in order to support the property—for example, the element must have a layout in order to get scrollbars.

Once a layout is applied the “hasLayout” flag is set. This property returns true if queried.

hasLayout 一旦触发，它的值就是 ”true“。（而且是不可逆转的）

###为什么要关心这个东东

A: 有个 Layout 很叼吗？
B: 不，一点都不叼，而且土的掉渣。
A: 那为什么我还要了解？
B: 因为很多 IE 的 bug 都是因为它。你搞定了它，解决 bug 就更 easy！


• display: inline-block
• height: (任何值除了auto)
• float: (left 或 right)
• position: absolute
• width: (任何值除了auto)
• writing-mode: tb-rl
• zoom: (除 normal 外任意值)

Internet Explorer 7 还有一些额外的属性(不完全列表):

• min-height: (任意值)
• max-height: (除 none 外任意值)
• min-width: (任意值)
• max-width: (除 none 外任意值)
• overflow: (除 visible 外任意值)
• overflow-x: (除 visible 外任意值)
• overflow-y: (除 visible 外任意值)
• position: fixed

###遇到 Layout 不用怕！

W3C:block-formatting
Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.