CSS魔法堂：hasLayout原来是这样的！_html/css_WEB-ITnose
前言
过去一直听说旧版本IE下很多诡异bug均由一个神秘角色引起的，那就是hasLayout。趁着最近突然发神经打算好好学习CSS，顺便解答多年来的疑惑。
hasLayout到底是何方神圣？
hasLayout可以简单看作是IE5.5/6/7中的BFC(Block Formatting Context)。也就是用于决定一个元素要么自己对自身内容进行组织和尺寸计算，要么由其containing block来组织和尺寸计算。
当hasLayout为true时(就是所谓的"拥有布局")，相当于元素产生新BFC，元素自己对自身内容进行组织和尺寸计算;
当hasLayout为false时(就是所谓的"不拥有布局")，相当于元素不产生新BFC，元素由其所属的containing block进行组织和尺寸计算。
和产生新BFC的特性一样，hasLayout无法通过CSS属性直接设置，而是通过某些CSS属性间接开启这一特性。不同的是某些CSS属性是以不可逆方式间接开启hasLayout为true。并且默认产生新BFC的只有 html元素，而默认hasLayout为true的元素就不只有 html元素了。
另外我们可以通过 object.currentStyle.hasLayout属性来判断元素是否开启了hasLayout特性。
到这里我们应该了解到若要理解hasLayout则必须理解BFC，因此这里可参考 CSS魔法堂：重新认识Box Model、IFC、BFC和Collapsing margins
默认 hasLayout==true的元素
<html>, <body><table>, <tr>, <th>, <td><img alt="CSS魔法堂：hasLayout原来是这样的！_html/css_WEB-ITnose" >,<hr><input>, <button>, <select>, <textarea>, <fieldset>, <legend><iframe>, <embed>, <object>, <applet>,<marquee>
触发 hasLayout==true的方式
display: inline-blockheight: (除 auto 外任何值)width: (除 auto 外任何值)float: (left 或 right)position: absolutewriting-mode: tb-rlzoom: (除 normal 外任意值)
IE7 还有一些额外的属性(不完全列表)可以触发 hasLayout ：
min-height: (任意值)min-width: (任意值)max-height: (除 none 外任意值)max-width: (除 none 外任意值)overflow: (除 visible 外任意值，仅用于块级元素)overflow-x: (除 visible 外任意值，仅用于块级元素)overflow-y: (除 visible 外任意值，仅用于块级元素)position: fixed
IE6 以前的版本（也包括 IE6 及以后所有版本的混杂模式，其实这种混杂模式在渲染方面就相当于 IE 5.5）， 通过设置任何元素的 'width' 或 'height'（非auto）都可以触发 hasLayout ； 但在 IE6 和 IE7 的标准模式中的行内元素上却不行，设置 'display:inline-block' 才可以。
其中通过 display:inline-block或 min-width:0或 min-height:0将不可逆地启用hasLayout特性。而在没有其他属性启用hasLayout时，可通过以下方式关闭hasLayout
max-width, max-height (设为 "none")(在IE7中)position (设为 "static")float (设为 "none")overflow (设为 "visible") (在IE7中)zoom (设为 "normal")writing-mode (从 "tb-rl" 设为 "lr-t")
而产生新BFC的CSS属性
position:absolute/fixedfloat:left/rightdisplay:inline-block/table-cell/table-caption/flex/inline-flexoverflow:(除visible外任意值)
可以看到导致产生新BFC的方式和触发 hasLayout==true的方式不完全重叠。因此hasLayout==true所引发的问题，很大程度可以理解为在不应该的或没有预料到的地方产生新的BFC导致的。
如何兼容？
仅当一个元素即在 IE 早期版本中触发了 hasLayout，又在其他浏览器中创建了 block formatting context 时，才能避免上述问题的发生。即同时启用上述两者以保证各浏览器的兼容，或者相反，两者皆不启用。
-
使元素即生成了 block formatting context，又触发了 hasLayout对于触发 hasLayout 的元素，通过 CSS 设置，使它产生 block formatting context；
-
生成 block formatting context 但是没有触发 hasLayout 的元素，通过设置 'zoom:1'，使其触发 hasLayout。
-
使元素即没有触发 hasLayout，又没有创建 block formatting context。
总结
虽然我现在已经不用再适配IE5.5/6/7了，但理解hasLayout还是很有必要的。其实可以理解为从另一个角度学习BFC吧！尊重原创，转载请注明来自：肥仔john^_^
感谢
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
了解HTML，CSS和JavaScript：初学者指南
Apr 12, 2025 am 12:02 AM
WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。
HTML，CSS和JavaScript的角色：核心职责
Apr 08, 2025 pm 07:05 PM
HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。
HTML，CSS和JavaScript：Web开发人员的基本工具
Apr 09, 2025 am 12:12 AM
HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构，使用标签如、等。2.CSS控制网页样式，使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互，通过事件监听和DOM操作。
HTML：结构，CSS：样式，JavaScript：行为
Apr 18, 2025 am 12:09 AM
HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。
HTML的未来：网络设计的发展和趋势
Apr 17, 2025 am 12:12 AM
HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。
HTML，CSS和JavaScript的未来：网络开发趋势
Apr 19, 2025 am 12:02 AM
HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。
HTML与CSS vs. JavaScript：比较概述
Apr 16, 2025 am 12:04 AM
HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。
HTML：建立网页的结构
Apr 14, 2025 am 12:14 AM
HTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。
