css float clear float haslayout

1: floatSpecial layout characteristics that cause the specified element to break away from the ordinary document flow. It must be applied to block-level elements, which means floats do not apply to inline tags. When float is applied then this element will be designated as a block-level element. For example, after an inline element is set to float, you can set the width and height for it.

.clear:after{
content:" ";
display:block;
height:0;
clear:both;
visibility:hidden;
}

: The after pseudo-element adds content after the element. This pseudo-element allows creators to insert generated content at the end of the element content. By default, this pseudo-element is an inline element, but this can be changed using the display attribute. The content generated by using after is a space. First display: block, and then set the height to 0 to prevent it from affecting the layout. Hiding is similar to height: 0 in that it does not affect the layout. clear: both means clearing float. For browsers ie6 and ie7 that do not support after, just add a height: 1%; and it will be ok. In this case, ie6 and ie7 will have haslayout.

2:haslayput

In fact, haslayout is an internal component of the rendering engine of Windows Internet Explorer 7 or below,

In Internet Explorer 7 and below, an element either calculates the size and organizes its own content, or relies on the parent element to calculate the size and organize the content. In order to reconcile these two different concepts, the rendering engine uses the hasLayout attribute, which can be true or false. When an element's hasLayout attribute value 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. Simply put, instead of relying on ancestor elements to do the job. IE can be viewed through the IE Developer Toolbar Next, whether the HTML element has haslayout, the element with haslayout is usually displayed as "haslayout = -1".

The has layout here is to calculate and position the size of itself and possible descendant elements to determine the height of the parent element. That is, the parent element adapts to the height of the content inside. This time everyone will understand why a height is added. :1% of the reason. Of course, you can also add other attributes to make it have layout, such as width, etc. Of course, you can add float (float can also trigger layout), but it is not recommended. Do not use float to clear the float, because float will generate another float.

100db36a723c770d327fc0aef2ce13b1,6c04bd5ca3fcae76e30b72ad730ca86d,f5d188ed2c074f8b944552db028f98a1a34de1251f0d9fe1e645927f19a896e8b4d429308760b6c2d20d6300079ed38eb6c5a531a458a2e790c1fd6421739d1c30d1d2c3c8c4fd418a3801ebb45a1534d5fd7aea971a85678ba271703566ebfd, bb9345e55eb71822850ff156dfde57c8, 221f08282418e2996498697df914ce4e, 4750256ae76b6b9d804861d8f69e79d3, 2b5469ab79cf842344327415c3b3bb95, e911751791aa3ba95dc724e2fb905976d5ba1642137c3f32f4f4493ae923989c, d8e2720730be5ddc9c2a3782839e8eb6, 273238ce9338fbb04bee6997e5552b95, 082dedeb30a00d0e6e2cdb74a392fac3ed126914ed1419bab26abf7cf307b7b9

The following CSS properties and values ​​will allow an element to get layout:

• position: absolute
  Absolute positioning The containing block of the element often has problems in this regard.

• float: left|right
  Due to the characteristics of the layout element, the floating model will have many weird behaviors.

• display: inline-block
  It is often used when an inline-level element requires layout. This may also be the only effect of this CSS property - let An element has a layout. "Inline-block behavior" is possible in IE, but it is very different: IE/Win: inline-block and hasLayout.

• width: any value except "auto"
  When many people encounter layout-related problems, they usually try to use this to fix them first.

• height: any value except "auto"
  height: 1% Used in Holly Hack.

• zoom: any value except "normal"
  IE-specific property. However, zoom: 1 can be used temporarily for debugging.

• writing-mode: tb-rl
  MS-specific property.

• overflow: hidden|scroll|auto
  In IE7, overflow has also become a layout trigger. This attribute did not have the function of triggering layout in previous versions of IE.

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

• In addition, several new haslayout actors have been added to the IE7 screen. If we only consider hasLayout, min/max and width/height behave similarly, and position is fixed. It's exactly the same as absolute.

• position: fixed

• min-width: any value
  Even if it is set to 0, the element can get layout.

• max-width: any value except "none"

• min-height: any value
  Even if it is set to 0, you can also make the element's haslayout=true

• max-height: any value except "none"

About inline level elements

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

• width and height only trigger hasLayout in quirks mode under IE5.x and IE6 or newer. For IE6, if the browser is running in standards compatibility mode, inline elements will ignore the width or height attributes, so setting width or height cannot order the element to have layout in this case.

• zoom can always trigger hasLayout, but it is not supported in IE5.0.

If an element with "layout" also displays: inline, its behavior is very similar to the inline-block mentioned in the standard: it is the same as ordinary text in a paragraph Arranged horizontally and continuously, affected by vertical-align, and the size can be adaptively adjusted according to the content. This can also explain why in IE/Win alone, inline elements can contain block-level elements with less problems, because in other browsers, display: inline means inline, unlike IE/Win, once the inline element has a layout, it still has a layout. Will become inline-block.

Reset hasLayout

Resetting the following properties to their default values ​​in another rule will reset (or revoke) hasLayout, if no other properties are added to 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 (from "tb-rl" to "lr-t")

Display attribute difference: when using "inline-block" When haslayout = true is set, even if this attribute is overridden to "block" or "inline" in a separate rule, the haslayout flag will not be reset to false.

Reset mid-width, Setting mid-height to their default value of "0" will still assign hasLayout, but IE 7 can accept an illegal attribute "auto" to reset hasLayout

.

The above is the detailed content of css float clear float haslayout. For more information, please follow other related articles on the PHP Chinese website!