CSS BFC and IE haslayout

First, BFC (Block formatting Context)

Related website: http://www.cnblogs.com/dolphinX/p/3508869.html

1. How to form BFC

• The value of float is not none.
• The value of the overflow is not visible.
• The value of display is Table-cell, table-caption, any of the inline-block.
• The value of position is not relative and static.

The role of 2.BFC

Do not overlap with floating elements

If a floating element is followed by a non-floating element, then an overlay is created, and many adaptive two-column layouts do so.

clear element floating inside

As long as the parent element is set to BFC to clear the floating of the child elements, the most common use is to set the Overflow:hidden style on the parent element, for IE6 plus zoom:1 (IE haslayout).

Solution to the problem of nested element margin folding

According to the definition of BFC, only the same belongs to a BFC, two elements can occur vertical margin overlap, this includes adjacent elements, nested elements, as long as they do not block (such as borders, non-empty content, padding, etc.) will occur margin overlap.

So to solve the margin overlap problem, as long as they are not the same BFC on the line, but for the two adjacent elements, the meaning is not significant, there is no need to add a shell, but for nested elements is necessary, as long as the parent element is set to BFC can be. This way the margin of the element does not overlap with the margin of the parent element.

Second, IE Haslayout

1. Haslayout Overview

"Layout" is a private concept of Internet Explorer for Windows that determines how an element displays and constrains what it contains, how it interacts with other elements, how to respond to and deliver application events, user events, and so on. This rendering feature can be irreversibly triggered by certain CSS properties. Some HTML elements, by default, have "layout".

Microsoft developers think that elements should be able to have a "property" (which is a concept in object-oriented programming), so they use haslayout, which is when the rendering feature is set to True when Haslayout is in effect. Understanding Haslayout will have more in-depth experience and even solutions to IE bugs.

2. Haslayout definition

When an element "gets layout", or an element "has layout", it refers to its Microsoft proprietary attribute Haslayout is set to true for this purpose. A "layout element" can be an element that has layout by default or an element that gets layout by setting some CSS properties.

The "No layout element" refers to an element that is not triggered by the haslayout, such as a clean div element that is not set to a wide and high size, and can be used as a "no layout ancestor".

The method for assigning layout to an element that does not have layout by default includes setting CSS properties that trigger Haslayout = True. Refer to the default layout elements and the list of these properties. There is no way to set haslayout = False unless you remove or reset the first CSS properties that trigger Haslayout = True.

3. The origin of layout

Unlike standard properties, and unlike some browser's private CSS properties, layout cannot be set directly by a CSS declaration. In other words, there is no "layout property", the element itself automatically has layout, or with some CSS declaration to quietly get layout.

The following elements should have layout by default:

• <table>, <tr>, <th>, <td>
• <input>, <button>, <select>, <textarea>, <fieldset>, <legend>
• <iframe>, <embed>, <object>, <applet>
• <marquee>

The following CSS properties and values will let an element get layout:

• Position:absolute
  The inclusion block of an absolutely positioned element (containing block) can often be problematic in this regard.
• Float:left|right
  Because of the characteristics of the layout element, the floating model can have a lot of weird performance.
• Display:inline-block
  It is often used when an inline-level element requires layout, which may also be the only effect of this CSS property-letting an element have layout. "Inline-block behavior" is achievable in IE, but very different: Ie/win:inline-block and haslayout.
• Width: Any value except "Auto"
  When many people encounter layout-related problems, they will usually try to fix them first.
• Height: Any value except "Auto"
  height:1% is used in the Holly Hack.
• Zoom: Any value except "normal"
  IE proprietary properties. But zoom:1 can be used as a temporary debugging.
• Writing-mode:tb-rl
  Ms Proprietary properties.

Haslayout members introduced in the IE7

1. • Overflow:hidden|scroll|auto
     In IE7, overflow also becomes a layout trigger, which has no function to trigger layout in previous versions of IE.
   • Position:fixed
   • Min-width: Any value
     Even setting it to 0 allows the element to get layout.
   • Max-width: Any value other than "none"
   • Min-height: Any value
     Even set to 0 allows the element to be haslayout=true
   • Max-height: Any value other than "none"

4. About inline level elements

For inline elements (which can be inline by default, such as span elements, or display:inline elements)

• Width and height only trigger haslayout under ie5.x and IE6 or later in quirks mode. For IE6, if the browser is running in standard compatibility mode, the inline element ignores the width or Height property, so setting width or height cannot be ordered in this case to have layout of the element.
• Zoom can always trigger haslayout, but it is not supported in IE5.0.

If the element with "layout" is display:inline at the same time, its behavior is similar to that of the standard Inline-block: in the same way as normal text in the paragraph, in the horizontal and continuous arrangement, affected by vertical-align, And the size can be adjusted according to the content adaptive. This can also explain why inline elements in Ie/win alone can contain block-level elements that are less problematic, because Display:inline is inline in other browsers, unlike Ie/win, which becomes inline-block once inline elements have layout.

5. Reset Haslayout

There is no way to set haslayout = False unless you remove the CSS properties that trigger Haslayout = True at the beginning.

Display properties differ: When Haslayout = True is set with "Inline-block", even if the property is "block" or "inline" in a separate rule, the HASLAYOUT flag bit is not reset to false.

6. CSS hacks, how to trigger Haslayout

More commonly used is the zoom:1, which is Microsoft's proprietary properties, can work on the ie6,ie7, without the effect, the only drawback is not through the world's grammar verification. So when debugging can first add zoom:1 try to test whether the problem is haslayout, if it is replaced by other corresponding attributes.

The most common is Holly Hack, simple point is to add height:1%. If its parent element cannot be set high, this method is automatically converted to Height:auto, but Haslayout is triggered. The advantage is that this is a standard attribute that can be verified by the consortium.

There is also a common use of height:0 or height:1px, but this method can only be used on IE6, because IE6 and the lower version will be the height as min-heigth, so set the height is small for the display has no effect. This method cannot be used in conjunction with Overflow:hidden.

7. Effect and effect of haslayout clear float

The effect is the same as BFC, which automatically clears its floating direct child elements.

For IE6 and IE7, I found that even if the parent element of the floating element is not haslayout, the height of the parent element is also there, which can be viewed through the JS output or iedeveloper, but there is no height in IE8 and other browsers (the value is 0). But the actual effect is not clear floating effect, that is, the actual height of the parent element is 0, as long as the following elements can be seen, the following elements will overlap with the previous elements. This makes me confused for a freshman.

Do not overlap with floating elements

Effect with BFC.

List

Whether the list itself (OL, UL) or a single list element (LI), having layout will affect the performance of the list. Different versions of IE have different performance. The most obvious effect is on the list symbol (the problem will not be affected if your list customizes the list symbol). These symbols are likely to be attached to the list elements by some internal mechanism (usually attached to them). Unfortunately, because they are added through the "internal mechanism", we cannot access them or correct their error performance.

Relative positioning elements (R.P.)

Note that because Position:relative does not trigger haslayout, many rendering errors, such as content disappearing or misplaced, can occur. These phenomena can occur when you refresh the page, resize the window, scroll the page, select content, and so on. The reason is that when IE offsets the element from this attribute, it seems to forget to signal that the child element of the layout is "redrawn" (and if it is a layout element, the signal to its child will normally be emitted in the signal chain in which it redraws the event). So when debugging, you can try to haslayout the relative positioning element to trigger it.

Filter

Ms Proprietary Filter Properties filter is applicable only to layout elements. such as transparent effects.

Background origin

The MS proprietary haslayout also affects the positioning and expansion of the background. For example, according to the CSS specification, background-position:0 0 should refer to the element's "padding Edge (padding edge)". And under Ie/win, if Haslayout = False refers to "border edge (Border edge)", when haslayout=true refers to the padding edge:

Solution to the problem of nested element margin folding

With BFC

Absolute positioning in the relative container (mainly IE6)

For an absolutely positioned element, the containing chunk is determined by its nearest location ancestor. If none of its ancestors are positioned, then the original chunk HTML is used.
In general, we use Position:relative to set any included chunks. That is to say, we can make an absolute positioning element reference to the origin and length, etc. do not depend on the order of the elements, this can meet such as "content first" the accessibility concept of the need, but also to the complex floating layout convenience.
However, due to the concept of layout, the effect of this design concept in IE will be a question mark: because absolute positioning in IE will only be calculated correctly when its containing elements have layout, and absolute positioning elements of the percentage width reference also made the wrong object. Here IE5 and IE6 behave differently but have problems. IE7B2 behavior is much better, although some small places still have errors. As far as possible, the absolute element of the containing block has layout, and as far as possible it is the absolute positioning of the elements of the parent element (that is, the replacement element and the absolute positioning element does not have an absolute positioning element of the other ancestors).

Block-level links

Haslayout affects a block-level linked mouse response area (clickable area). Usually haslayout = False when only the text coverage area can respond. Haslayout = True will respond to the entire block area. Any block-level element that adds events such as Onclick/onmouseover also has the same phenomenon. I failed to reproduce the problem.

Edge Cutting

Typically, when a box contains a more complex structure such as the content that extends its edge, the container often needs "haslayout" to avoid some rendering errors. But using this common approach will also be a dilemma when dealing with boundaries, because an element that gets "layout" becomes a self-enclosing box. Internal content boxes are cropped, such as when using negative margins to move outward.

The cropped part can reappear when the content box triggers "layout", but it needs to have position:relative in IE6. IE7 has made a difference in this area, and it no longer requires additional position:relative.

Case Study 1. Clear floating

The most primitive usage <div style= "Clear:both" ></DIV> The disadvantage of this usage is to add meaningless blank labels.

Overflow:hidden, which is often used in a way, but the fact that its principle is for non-IE6 and IE7 browser to produce BFC, for IE7 browser is generated haslayout. But the disadvantage of this approach is that if the child element is outside the bounds of the parent element it is intercepted. For IE6 invalid, you can use Zoom:1. I was just learning css when I was curious about why Overflow:hidden can clean up floats.

One of the most popular and harmless ways to do this right now is:

     . clearfix:after {              content: "";              Display:block;              Clear:both;              height:0;            }            . Clearfix {              *height:1%;            }           

Code Analysis: For non-IE6 and IE7 support: After the browser, the last side of the content to add a blank element, and then hide it, while adding the Clear:both property, to clean up the float for the purpose, for not supported: after the browser ( The main is IE6 and IE7), set height:1% can trigger haslayout to achieve the purpose of cleaning up the float.

2. Horizontal two-column self-adapting typesetting

See BFC does not overlap with floating elements that section. Is that the first element is floating, and the second element is going to trigger BFC or haslayout to avoid being overwritten by a floating element.

       . second-item {               Overflow:hidden;               *zoom:1;//ie6             }           

Cross-browser Inline-block

For browsers that support Inline-block, Display:inline-block is available, and for unsupported browsers (IE6 and IE7), the implementation method is to set the element to Display:inline, The haslayout that triggers it at the same time is possible.

       #item {               display:inline-block;             }             #item {               *display:inline;             }           

This place needs to note that these two must be written separately, cannot be placed in the same selector, otherwise haslayout will be canceled, then you need to zoom:1, so if you want to write together, the code is as follows:

       #item {               display:inline-block;               *display:inline;               *zoom:1;             }           

In fact, in IE, as long as it is triggered by the BFC can be set wide, if it is an inline element is inline-block effect, and has the BFC element can be set wide, in addition to Overflow:hidden;

CSS BFC and IE haslayout