CSS float clears floating haslayout

1:float Special layout characteristics that result from the specified element being detached from the normal document flow. It must be applied on top of block-level elements, meaning that floats do not apply to inline tags. When float is applied, this element is specified as a block-level element. For example, if an inline element is set to float, it can be set to a wide height.

. Clear:after{content: "";d Isplay:block;height:0;clear:both;visibility:hidden;}

: After pseudo-elements add content after the element, this pseudo-element allows the author to insert the generated content on the last side of the element's content. By default, this pseudo-element is an inline element, but you can use the attribute display to change this. The content generated with after is a space, first display:block, then the height of 0, do not let him affect the layout, hiding and height:0 almost do not affect the layout. Clear:both is to clear the float. After browser is not supported IE6, IE7 is add a height:1%; OK, so Ie6,ie7 will have haslayout.

2:haslayput

In fact, Haslayout is an internal component of the following rendering engines for Windows Internet Explorer7.

Under InternetExplorer7, an element either calculates its own size and organization of its own content, or relies on the parent element to calculate dimensions and organize content. To adjust these two different concepts, the rendering engine takes the Haslayout property, which can be either true or false. When the Haslayout property value of an element is true, we say that the element has a layout. When an element has a layout, it is responsible for sizing and positioning itself and possible descendant elements. In simple terms, instead of relying on ancestral elements to accomplish these tasks. With IE Developer Toolbar, you can see if the HTML element under IE has haslayout, has haslayout elements, and is usually displayed as "haslayout =-1".

The has layout here is the size of their own and possible descendants of the elements of the calculation and positioning to determine the height of the parent element, that is, the parent element to adapt to the height of the content, this time we understand why to join a height:1% reason, of course, you can also add other properties to make it has Layout, such as width. Of course, the addition of float can also (float can also trigger layout), but not recommended, do not use Floa to clear the float, so float will produce a float.

<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.

• Overflow:hidden|scroll|auto
  In IE7, overflow also becomes a layout trigger, which has no function to trigger layout in previous versions of IE.

• Overflow-x|-y:hidden|scroll|auto
  Overflow-x and overflow-y are attributes in the CSS3 box model and have not been widely supported by browsers. They do not have the ability to trigger layout in previous versions of IE.

• Another IE7 on the screen added a few haslayout actors, if only from haslayout this aspect, Min/max and width/height performance similar, position fixed and absolute is identical.

• 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"

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.

Reset Haslayout

Resetting the following property in another rule resets (or revokes) haslayout to the default value, if no additional properties are added Haslayout:

• width, height (set to "Auto")

• Max-width, Max-height (set to "none") (in IE 7)

• Position (set as "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")

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.

Set Mid-width, mid-height to their default value "0″ will still give haslayout, but IE 7 can accept an illegal attribute" auto "to reset haslayout.