BFC and hasLayout

Both BFC and hasLayout are concepts of CSS layout.

I learned what BFC is on Weibo a few months ago. It is a little preliminary understanding of the layout.

HasLayout is the root cause of many bugs in IE6 and 7.

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 'visable' (when T when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. the vertical distance between two sibling boxes is determined by the 'margin 'properties. vertical margins between adjacent block-level boxes in a block formatting context collapse.

In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch ). this is true even in the presence of floats (although a box's line boxes may shrink due to the floats ), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats ).

The translation is:

Floating and absolute positioning elements are not block containers (inline-block, table-cell, and table-caption) of block boxes, and block boxes with the overflow attribute (apart from visible, they form a new block formatting contexts (BFC) for their content ).

In a BFC, the box is arranged one by one. Vertically, the starting point of the box is the top of a block. The vertical distance between two equal-level frames is determined by margin. The margin of the adjacent block-level frames in the vertical direction is collapsed.

In a BFC, the left outer side of each frame is in contact with the left side of the contained block (for formatting from right to left, the right outer side is in contact with the right side ), this is true even if there is a floating (although the content area of a box will shrink due to floating), unless this box forms a new BFC (in this case, the box itself becomes narrower due to floating ).

Here we will not translate how to read BFC's specific Chinese characters, but translate it into "block-level formatting context. In my understanding, a BFC provides a Square area that wraps block boxes and line boxes to determine their layout.

Methods for forming BFC:

• Float: left | right
• Position: absolute | fixed
• Display: inline-block | table-cell | table-caption
• Overflow: hidden | auto | scroll

Role of BFC:

• Case 1:

One of the solutions (there are many solutions for margin folding) is to add overflow: hidden to the black box to form a BFC.

• Case 2:

The solution is to create a BFC for non-floating elements so that they do not stack with floating elements.

• Case 3: The elements that form the BFC can clear its internal fluctuations so that the height does not collapse ".

II,HasLayout

HasLayout is a proprietary concept (attribute) in IE. It determines whether an element has a layout. It is not a CSS attribute, so it cannot be displayed and set to true or false. An element with a layout is responsible for the size and positioning of itself and its child elements. elements without a layout are the responsibility of the ancestor element with a layout. When an element has a layout, it is called has layout (hasLayout is true ). HasLayout is removed from IE8 standard mode.

HasLayout can reduce the overhead of the IE Display Engine. Ideally, all elements can be used for their own dimensions and positioning, but this may cause a major performance issue in earlier versions of IE, therefore, IE only sets hasLayout for some elements.

By default, layout elements are:

Html, body, table, tr, th, td, iframe, object, applet, img, hr, input, button, select, textarea, fieldset, legend, etc.

Setting the following attributes will make an element layout:

• Position: absolute
• Float: left or right
• Display: inline-block
• Width: any value other than auto
• Height: any value other than auto
• Zoom: any value other than normal
• Writing-mode: tb-rl

You can also set hasLayout through the following attributes in IE7:

• Overflow: hidden or scroll or auto
• Overflow-x: hidden or scroll or auto
• Overflow-y: hidden or scroll or auto
• Min-width: any value other than auto
• Max-width: any value other than auto
• Min-height: any value other than auto
• Max-height: any value other than auto

HasLayout is a bit similar to BFC. For example, all the above BFC scenarios can be solved by triggering hasLayout in IE6 and 7. Many layout bugs in IE6 and 7 (such as 3px gap and absolute positioning inheritance width) can be fixed by triggering hasLayout. The recommended methods are zoom: 1 and height: 1%, the existing style will not be damaged.

When you set some attributes (such as float, position, and display), both BFC and hasLayout are formed, or overflow can be set when> = IE7. If only one of them is triggered (formed), it is best to trigger (formed) the other at the same time to ensure browser compatibility.