Learning about hasLayout and Block formatting contexts (Part 1)_html/css

Home

Web Front-end

HTML Tutorial

Learning about hasLayout and Block formatting contexts (Part 1)_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:39 AM

Learning about hasLayout and Block formatting contexts

@(css BFC)[IE hasLayout|Miaotong]

What is hasLayout?

haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout属性值为true时，我们说这个元素有一个布局（layout）。注意：hasLayout属性是微软特有的过时属性，在IE8、IE9中，hasLayout属性已经被废弃。下文中的InternetExplorer都是指IE7、IE6及以下版本。

When an element has a layout, it is responsible for sizing and positioning itself and possible descendant elements. Simply put, this means that the element needs to spend more time maintaining itself and its contents, rather than relying on ancestor elements to do this work. Therefore, some elements will have a layout by default. When we say that an element "has layout" or "gets layout", or that an element "has layout", we mean that its Microsoft-specific property hasLayout is set to true. A "layout element" can be an element that has a layout by default or an element that has a layout by setting certain CSS properties. You can check whether HTML elements under IE have haslayout through IE Developer Toolbar. Under IE Developer Toolbar, elements with haslayout are usually displayed as "haslayout = -1". ‘Layout’ In IE, you can use the hasLayout attribute to determine whether an element has layout, such as object.currentStyle.hasLayout.

Elements responsible for organizing their own content will have a layout by default, which mainly includes the following elements (incomplete list):

	<html>, <body>	<table>, <tr>, <th>, <td>	<img  alt="Learning about hasLayout and Block formatting contexts (Part 1)_html/css_WEB-ITnose" >	<hr>	<input>, <button>, <select>, <textarea>, <fieldset>, <legend>	<iframe>, <embed>, <object>, <applet>	<marquee>对于并非所有的元素都默认有布局，微软给出的主要原因是“性能和简洁”。如果所有的元素都默认有布局，会对性能和内存使用上产生有害的影响。http://www.satzansatz.de/cssd/onhavinglayoutrev07-20060517.html

Debugging and solving haslayout issues

When the web page behaves abnormally in IE, you can try to activate haslayout to see if the problem is the problem. A common method is to set zoom:1 to the css of an element. Zoom:1 is used because in most cases it fires the element's haslayout without affecting the existing environment. Once the problem disappears, it can basically be determined that it is the cause of haslayout. Then you can correct this problem by setting the corresponding css properties. It is recommended that the first thing to consider is to set the width/height attributes of the element, and then consider other attributes.
For IE6 and earlier versions, the common method is called the Holly hack, which is to set the height of this element to 1% (height:1%;). It should be noted that this method will not work when the overflow property of this element is set to visible. Or use IE's conditional comments.
For IE7, the best way is to set the minimum height of the element to 0 (min-height:0;).
Common bugs caused by haslayout issues
Double margin floating bug in IE6 and lower versions
bug fix: display:inline;
3 pixel offset bug in IE5-6/win
bug fix: height:1%;
IE6’s peek-a-boo bug
bug fix: height:1%;
IE6/7 negative margin hidden bug:
bug Repair: Remove the hasLayout of the parent element; or assign hasLayout to the child element and add position: relative;

How to activate haslayout?

Most IE display errors can be corrected by activating the haslayout attribute of the element. You can activate the element's haslayout by setting the css size attribute (width/height), etc., so that it "has layout". Just set the following css properties as shown below.

display: inline-block

height: (any value except auto)

width: (any value except auto)

float: (left or right)

position: absolute

writing-mode: tb-rl

zoom: (any value except normal)

Internet Explorer 7 also has some additional properties (not a complete list):

min-height: (any value)

max-height: (any value except none)

min-width: (any value)

max-width: (any value except none)

overflow: (any value except visible)

overflow-x: ( Any value except visible)

overflow-y: (Any value except visible)

position: fixed
where overflow-x and overflow-y are Properties in the css3 box model are not yet widely supported by browsers.
For inline elements (the default is inline elements, such as span, or elements with display:inline;),
width and height are only triggered in IE5.x and IE6 or newer versions of quirks mode hasLayout. 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" displays: inline at the same time, its behavior is very similar to the inline-block mentioned in the standard: it is arranged horizontally and continuously in the paragraph like ordinary text, subject to vertical- align affects, and the size can be adjusted adaptively 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.

What are Block formatting contexts?

This article refers to the W3C CSS 2.1 specification Visual formatting model
http://www.w3.org/TR/CSS2/
http://www.w3.org/TR/CSS2/visuren .html#inline-level
http://www.w3.org/TR/CSS2/visuren.html#normal-flow

Box: The basic unit of CSS layout

Box is the object and basic unit of CSS layout. From a visual point of view, a page is composed of many Boxes. The type of element and display attribute determine the type of this Box. Different types of Box will participate in different Formatting Context (a container that determines how to render the document), so the elements within the Box will be rendered in different ways. Let’s see what boxes there are:

block-level box: elements with display attributes of block, list-item, table will generate block-level boxes. And participate in block fomatting context;
inline-level box: Elements with display attributes of inline, inline-block, and inline-table will generate inline-level boxes. And participate in inline formatting context;
run-in box: only available in css3, I won’t talk about it for now. http://www.w3.org/TR/css3-box/#run-in-boxes

Formatting context

　Formatting context is the W3C CSS2.1 specification a concept in . It is a rendering area on the page and has a set of rendering rules that determine how its sub-elements will be positioned and their relationship and interaction with other elements. The most common Formatting contexts are Block fomatting contexts (BFC for short) and Inline formatting contexts (IFC for short).

There are only BFC and IFC in CSS2.1, and GFC and FFC are also added in CSS3.
　
BFC definition

　BFC (Block formatting contexts) is literally translated as "block-level formatting context". It is an independent rendering area in which only the Block-level box participates. It stipulates how the internal Block-level Box is laid out and has nothing to do with the outside of this area.
　
BFC layout rules :

The internal Boxes will be placed one after another in the vertical direction.

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

The left side of the margin box of each element is in contact with the left side of the containing block border box (for a left-to-right format ation, otherwise the opposite). This is true even if there is float.

The BFC area will not overlap with the float box.

BFC is an isolated independent container on the page. The sub-elements inside the container will not affect the elements outside. And vice versa.

When calculating the height of BFC, floating elements also participate in the calculation.

In CSS3, this concept has been changed: http://www.w3.org/TR/css3-box/#block-level0
In CSS3, BFC is called flow root.

How to trigger BFC?

float: (any value except none)

overflow: (any value except visible)

display:(table-cell/table-caption/inline-block)

position: (any value except static/relative)
Note: We sometimes use overflow The :hidden method is used to clear floats because the BFC of the element is triggered (IE6 7 requires zoom to be 1 and triggers hasLayout). You can refer to the detailed explanation of css float

This is the summary for today, and we will continue with the next article tomorrow. If there are any errors or deficiencies, please point them out, thank you very much! ----Miaotong.

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

The Future of HTML: Evolution and TrendsMay 13, 2025 am 12:01 AM

The future of HTML will develop in a more semantic, functional and modular direction. 1) Semanticization will make the tag describe the content more clearly, improving SEO and barrier-free access. 2) Functionalization will introduce new elements and attributes to meet user needs. 3) Modularity will support component development and improve code reusability.

Why are HTML attributes important for web development?May 12, 2025 am 12:01 AM

HTMLattributesarecrucialinwebdevelopmentforcontrollingbehavior,appearance,andfunctionality.Theyenhanceinteractivity,accessibility,andSEO.Forexample,thesrcattributeintagsimpactsSEO,whileonclickintagsaddsinteractivity.Touseattributeseffectively:1)Usese

What is the purpose of the alt attribute? Why is it important?May 11, 2025 am 12:01 AM

The alt attribute is an important part of the tag in HTML and is used to provide alternative text for images. 1. When the image cannot be loaded, the text in the alt attribute will be displayed to improve the user experience. 2. Screen readers use the alt attribute to help visually impaired users understand the content of the picture. 3. Search engines index text in the alt attribute to improve the SEO ranking of web pages.

HTML, CSS, and JavaScript: Examples and Practical ApplicationsMay 09, 2025 am 12:01 AM

The roles of HTML, CSS and JavaScript in web development are: 1. HTML is used to build web page structure; 2. CSS is used to beautify the appearance of web pages; 3. JavaScript is used to achieve dynamic interaction. Through tags, styles and scripts, these three together build the core functions of modern web pages.

How do you set the lang attribute on the tag? Why is this important?May 08, 2025 am 12:03 AM

Setting the lang attributes of a tag is a key step in optimizing web accessibility and SEO. 1) Set the lang attribute in the tag, such as. 2) In multilingual content, set lang attributes for different language parts, such as. 3) Use language codes that comply with ISO639-1 standards, such as "en", "fr", "zh", etc. Correctly setting the lang attribute can improve the accessibility of web pages and search engine rankings.

What is the purpose of HTML attributes?May 07, 2025 am 12:01 AM

HTMLattributesareessentialforenhancingwebelements'functionalityandappearance.Theyaddinformationtodefinebehavior,appearance,andinteraction,makingwebsitesinteractive,responsive,andvisuallyappealing.Attributeslikesrc,href,class,type,anddisabledtransform

How do you create a list in HTML?May 06, 2025 am 12:01 AM

TocreatealistinHTML,useforunorderedlistsandfororderedlists:1)Forunorderedlists,wrapitemsinanduseforeachitem,renderingasabulletedlist.2)Fororderedlists,useandfornumberedlists,customizablewiththetypeattributefordifferentnumberingstyles.

HTML in Action: Examples of Website StructureMay 05, 2025 am 12:03 AM

HTML is used to build websites with clear structure. 1) Use tags such as, and define the website structure. 2) Examples show the structure of blogs and e-commerce websites. 3) Avoid common mistakes such as incorrect label nesting. 4) Optimize performance by reducing HTTP requests and using semantic tags.

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Grow A Garden - Complete Mutation Guide

3 weeks agoByDDD

How to fix KB5055612 fails to install in Windows 10?

3 weeks agoByDDD

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Nordhold: Fusion System, Explained

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.