Finded I haven’t updated blog post for a long time =-= here I wrote in the blog garden before an article about the BFC paste over, incidentally oneself also make a summary again.

Recently I read an article summarizing the common bugs in IE, which mentioned that most of IE’s bugs are due to her unique attribute: hasLayout. I have known a little about this attribute before, but I did not understand it deeply, so I looked up some related materials, and now I will summarize this attribute here.

A common definition of hasLayout

It’s a long story. If the content here is not easy to understand, it is recommended to have a look at the BFC properties mentioned in the following article.

In IE, an element either sizes and organizes its own content or relies on a parent element to size and organize its content. To accommodate these two different concepts, the rendering engine uses the HasLayout property, which can be true or false. When an element’s hasLayout attribute is true, we say the element has a layout.

If it is set to true, it will have to render itself, so the element will have to expand to include its outflow. For example, float or long, untruncated words, if hasLayout is not set to true, then the element has to rely on an ancestor element to render it. This is where a lot of IE Bugs were born.

When an element has a layout, it is responsible for sizing and positioning itself and its possible descendants. In simple terms, this means that the element has to pay more to maintain itself and its contents, rather than relying on the ancestor element to do so. Therefore, some elements will have a layout by default. When we say an element “has a layout” or “gets a layout,

When we say an element has layout, we mean that its Microsoft exclusive hasLayout property is set to true. The IE Developer Toolbar allows you to see if an HTML element in IE has HasLayout. In the IE Developer Toolbar, an element that has HasLayout is usually displayed as “HasLayout = -1”.

It is important to note that there is no HasLayout property in CSS. The HasLayout property in IE can only be triggered by setting certain properties to certain values. This property has been dropped in IE8 and later.

How to activate “HasLayout” — Adjust the following CSS properties:

  • Width: Non-auto arbitrary value — preferred

  • Height: Non-auto arbitrary value — Commonly used for IE6 and earlier, this method is known as the Holly hack, which sets the height of this element to 1% (height:1%;). . Note, however, that this method is disabled when the overflow property of the element is set to visible.

  • Zoom: Non-Normal arbitrary value — This property is also specific to IE. I usually test it with Zoom :1. You can avoid breaking the layout by changing other properties.

  • Position: Absolute — May cause a new problem.

  • Float: Left/Right — Many of the most common bugs in IE are caused by triggering HasLayout when elements are set to float.

  • Display :inline-block — This property is used when an inline element wants a layout.

  • Set any value for min-height, max-height (except None), min-width, max-width (except None) — for IE7.

  • Overflow, overflow-x, overflow-y any value except visible — for IE7.

  • Position :fixed — For IE7.

Reset “HasLayout” : No other properties are required to activate HasLayout.

  • Width, height (set to” auto”)

  • Max-width, max-height (set to “none”)(in IE 7)

  • Position (set to “static”)

  • Float (set to “none”)

  • Overflow (set to “visible”) (in IE 7)

  • Zoom (set to “Normal “)

  • Writing mode (set from “TB-RL” to “LR-T “)

Note: When the hasLayout attribute is activated with an inline-block, the hasLayout flag bit is not reset to false even if it is overridden as a block or an inline in a separate rule. Setting min-width and min-height to their default values of “0” will still give HasLayout, but IE 7 can accept an illegal auto attribute to reset HasLayout.

Blocklevel formatting context BFC

BFC is a concept in the W3C CSS 2.1 specification that determines how elements position their content, and how they relate to and interact with other elements. When it comes to visual layouts, Block Formatting Context provides an environment in which HTML elements are laid out according to certain rules. Elements in one environment do not affect layouts in other environments.

To better understand the BFC, let’s talk about the concepts of Box positioning and positioning Context. We know that a web layout is made up of boxes. These blocks are called boxes. The type of the Box is determined by the type of the element and the display attribute. Different types of boxes participate in different Formatting contexts (determining how documents are rendered), so elements inside the boxes are rendered in different ways.

Such as:

  • Block-level Box: Display is a block, list-item, or table element that generates a block-level box. And participate in the block fomatting context;

  • Inline-level box:display elements whose attributes are inline, inline-block, and inline-table will generate an inline-level box. And participate in inline positioning context;

Formatting Context is a rendering area that determines how its child elements are positioned and how they relate to other elements.

Based on the above basic concepts, I simply understand BFC as an attribute. In a container with a BFC attribute, the elements are laid out according to the rules of BFC. For example, floating elements can form BFCs, which is why we see floating element layouts that are different from normal document layouts.

The rules of the landing

  • The internal boxes will be placed vertically, one after the other.

  • The vertical distance of Box is determined by margin. Margins of two adjacent boxes belonging to the same BFC will overlap

  • The left side of each element’s margin box touches the left side of the border box containing the block (for left-to-right formatting, otherwise the opposite is true). This is true even when there is a float.

  • The region of the BFC does not overlap with the float box.

  • A BFC is an isolated, independent container on a page. The child elements inside the container do not affect the elements outside. And vice versa.

  • When calculating the height of the BFC, the floating element is also involved

Which elements form BFCs

  • The root element

  • The float property is not None

  • Position is absolute or fixed

  • Display: inline-block, table-cell, table-caption, flex, inline-flex

  • The overflow is not visible

The role of BFC in layout

  • Solve the problem of the overlap of the two elements’ margins

    In order for two adjacent elements not to overlap vertically, they need to be defined in different BFCs. The solution is to wrap a layer of elements around one of the elements, and then BFC fire on that layer of elements. (You can add the above CSS properties here.)

  • Resolves overlap issues due to floating

    In general, floating elements are removed from the document flow, that is, they do not occupy a position. Its sibling will overlap with it in the upper left hand corner. However, if two adjacent elements are set to float, it means that they are both rendered with BFC rules. According to the fourth rule above, BFC areas do not overlap each other, so you can understand why floating elements can dominate space.

  • Solved the issue of high collapse of containers due to floating elements

    In a normal container, if there is a floating element in it, the container cannot be prostrated without setting the height. In this case, set overflow: hidden to BFC to contain floating elements.

That’s the end of the BFC description, and I’ll go back to the HasLayout problem I discussed in the first place. IE 7 and below do not support BFC, but have a private hasLayout attribute, so we can trigger the element’s hasLayout to achieve a similar effect to the BFC.

IE because of haslayout caused by the bug

1. A 3px bug exists between floating elements and normal elements

< / span > < / p > < p style >.test {width: 800px; margin: 10px auto; border: 1px solid brown; height: 30px; } .float {float: left; background: saddlebrown; color: #fff; }} </div style> <div class="test"> <div class="float"> </div> </div> bug </div> bug

Normal conditions:

Under ie6:

Margin-right :-3px; margin-right:-3px; margin-right:-3px;

In addition to text, floating elements in IE6 will also produce a margin of 3px with inline elements.

Normal conditions:

6, 7:

Same solution as above.

Block level elements and float elements do not overlap

<style> .test {width: 800px; margin: 10px auto; border: 1px solid brown; height: 30px; } .float {float: left; background: saddlebrown; color: #fff; }} </div> <div class="float" class="float" style="background: #0079F5; height: 30px;" > I am the block-level element </div> </div> after the float element

Normal conditions:

6, 7:

It is obvious that block-level elements do not overlap with floating elements under IE6,7. Why does this happen? Because I set the height on the block-level element. The haslayout property in IE is enabled. IE6 then renders it in a BFC-like manner.

Solution: Wrap a DIV around the block-level element. And write the property of the inner divBackground on the outer DIV.

3. Floating closed elements are a problem that many people encounter, as mentioned above, but may be called differently.

<style> .test {width: 800px; margin: 10px auto; border: 1px solid brown; } .float {float: left; background: saddlebrown; color: #fff; } </style> <div class="test"> <div class="float"> </div> </div>

Normal conditions:



Note that the horizontal line is the border of.test, because the float element is out of the document stream, so.test cannot be held up.

6, 7

IE seems to be working fine. In many cases, what we want is an IE effect. In IE, a floating element always belongs to the container that contains it. Because.test sets the width and enables the hasLayout property. In non-IE browsers, we usually want to achieve this effect by adding a “after” pseudo-object on the parent box to clear the float, or setting overflow: hidden to trigger the BFC.

Insert a reference to the common practice of closing a float: Add Clearfix’s class for the parent element that needs to close the float.

.clearfix::after {content:""; display:block; height:0; clear:both; } .clearfix {zoom: 1; } // Compatible with IE6, 7

4, IE margin does not collapse

<style> .test {width: 800px; margin: 10px auto; } .float {float: left; background: saddlebrown; color: #fff; } </style> <div class="test"> <div class="float"> </div> <div style="margin-top:30px;" </div> </div> </div> </div>

Normal conditions:

6, 7

Float is a float element that is out of the document stream, so the margin-top of the second DIV is relative to its parent.test. But we just set margin-top for the second DIV. In Chrome, even float is “margin-top”. Compare IE and Chrome under the effect, do you think the IE under the analysis will be more reasonable?

But. Don’t forget that a major rule that affects margin-top/bottom is collapsing.

Margin collapse is mentioned. Let’s take a look at some conditions for margin collapse in the vertical direction:

  • Horizontal Margins do not merge.

  • Margin merge occurs in normal page flow when two block elements that are rendered next to each other (not necessarily siblings).

  • Floating elements do not merge margins with any elements (including descendants).

  • overflow! The =visible element does not merge with any other element.

  • Definitely positioned elements do not combine margins with any elements.

  • Inline-block elements do not combine margins with any other elements.

  • The element with the clear attribute does not make a margin merge on any element.

  • The root element does not combine margins with any elements.

  • Margin-top merge occurs between the parent node and the first child node.

  • If the last child node has no border and padding, a margin-bottom merge occurs with its parent node.

Note that lower versions of IE, especially HasLayout, also have an effect on margin merging, which also causes a difference in the position of the absolute positioning elements included.

In modern browsers, the height of the test block is not expanded by the margin-top of the second DIV of the quilt element. On the other hand, I have a 30px margin-top. Floating blocks, though separated from the document stream, are restricted by their parent (just as element levels located at Absolute are restricted by their parent defined as Relative). So float is still included in the test, so in Chrome it looks like the float block has margin-top, when in fact it is because the test is not high enough to open the result.

So, Chrome is not wrong, then IE is how to avoid margin collapse? The problem is with floats. In IE, floating an element triggers its HasLayout. This is the reason for the unexpected (unexpected?) in IE. The margin collapse is avoided.

But oddly enough, if you add border to.test, Chrome renders just like IE, with float not having the same margin-top value as the second DIV. It’s right on top of.test. The diagram below:

Chrome:

6, 7:

The cause of this problem needs to be studied… If there is a reason to know the big god trouble to leave a message, thank you!

5, IE margin-left/right invalid

<style>
.test {margin: 10px auto;border:1px solid darkred;}
</style>

<div class="test">
    <div style="height:30px;margin:0 20px;border-bottom: 3px solid sandybrown;">测试失效的margin-left</div>
</div>

Normal conditions:

Ie6:

As can be seen from the above figure, the margin we set for the subdiv in IE is invalid. The reason why this happens is also because the child DIV is set to the height and HasLayout is activated.

Solution: do not set the height for the child DIV, or enable haslayout for the parent box as well.

References: http://cssass.com/blog/2009/147.html http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html http://www.cnblogs.com/pigtail/archive/2013/01/23/2871627.html

The original link: http://www.cnblogs.com/Remix/articles/4777257.html