hasLayout是什么 hasLayout是IE特有的一个属性。很多的ie下的css bug都与其息息相关。...hasLayout属性不能直接设定，通过设定一些特定的css属性来触发并改变 hasLayout 状态。 元素hasLayout而导致的问题其实一般都很容易发现：往往是内容出现错位甚至完全不可见。...display 启动haslayout的值:inline-block 取消hasLayout的值:其他值 width/height 启动hasLayout的值：除了auto以外的值 取消hasLayout...的值：auto position 启动hasLayout的值：absolute 取消hasLayout的值：static float 启动hasLayout的值：left或right 取消hasLayout...的值：none zoom 启动hasLayout的值：有值 取消hasLayout的值：narmal或者空值 （zoom是微软IE专有属性，可以触发hasLayout但不会影响页面的显示效果。
前言 过去一直听说旧版本IE下很多诡异bug均由一个神秘角色引起的，那就是hasLayout。趁着最近突然发神经打算好好学习CSS，顺便解答多年来的疑惑。 hasLayout到底是何方神圣？...和产生新BFC的特性一样，hasLayout无法通过CSS属性直接设置，而是通过某些CSS属性间接开启这一特性。不同的是某些CSS属性是以不可逆方式间接开启hasLayout为true。...另外我们可以通过object.currentStyle.hasLayout属性来判断元素是否开启了hasLayout特性。...context； 1.2 生成 block formatting context 但是没有触发 hasLayout 的元素，通过设置 'zoom:1'，使其触发 hasLayout。...使元素即没有触发 hasLayout，又没有创建 block formatting context。 总结 虽然我现在已经不用再适配IE5.5/6/7了，但理解hasLayout还是很有必要的。
一些HTML标签默认具有haslayout。 PS：一个对象的layout属性被激活，它的具体表现就是haslayout=true。...一个元素触发 hasLayout 会影响一个元素的尺寸和定位，这样会消耗更多的系统资源，因此 IE 设计者默认只为一部分的元素触发 hasLayout （即默认有部分元素会触发 hasLayout ，这与...hasLayout属性不能直接设定，你只能通过设定一些特定的css属性来触发并改变 hasLayout 状态。下面列出可以触发hasLayout的一些CSS属性值。 ...---------------------- zoom 启动hasLayout的值：有值 取消hasLayout的值：narmal或者空值 （zoom是微软IE专有属性，可以触发hasLayout...上面也有说道，hasLayout 与很多 IE 下的显示 bugs 都有关，实际上很多莫名奇妙的 bugs 都因 hasLayout 而起，因此只要适当的触发元素的 hasLayout ，很多 IE bugs
而其原因在于，overflow(非visible值) 可以触发 BFC(Block Formatting Context) 或者是 IE67中的 hasLayout，使之改变了排版的方式。...那问题又来了，什么是BFC，什么是 hasLayout? 关于 hasLayout 请戳这里，解释的蛮清晰的。...的css属性均可以清除浮动，而 overflow 被广泛使用的原因，我想应该在于，在触发 BFC 或者 hasLayout 的同时，对元素自身的定位或者表现影响有限。...对于IE6，设置 overflow 并不能触发 hasLayout, （IE7可以！）因此需要设置其他属性，如zoom:1 width: 100% 等。...总结 从各种书籍和文章看来，清除浮动主要是从以下两种思路入手： 利用 clear 属性 触发BFC 或者 hasLayout 以上是对最近看到的有关清除浮动的资料，所做的思考总结。
margin-bottom的bug是容器div的 'zoom:1' 触发了 hasLayout，其内部浮动子元素也参与到了容器的高度计算之中 在 IE6 IE7 IE8(Q)中，容器div的 'zoom...:1' 触发了 hasLayout，其内部浮动子元素也参与到了容器的高度计算之中。...若容器高度不定，则要避免在触发了 hasLayout 的容器内的浮动子元素上设置 'margin-bottom' 特性，可以通过为容器设置 'padding-bottom' 达到相似的效果。...只要不同时触发父元素hasLayout、子元素左浮动、左浮动子元素拥有非零的 margin-bottom 值，这三个条件中任意一项，均可解决此问题。
由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。 ...并且说道“Firefox等浏览器并没有haslayout的概念”，那么现代浏览器是有BFC的，从表现上来说，hasLayout 可以等同于 BFC。...... rties/haslayout.asp 为此被设为了 true 。...~IE11 通过「document.documentElement.currentStyle.hasLayout」依然可以获得 hasLayout 的标志，我写了一个测试 Demo（IE8 中 zoom...” Overview hasLayout Property IE hasLayout https://developer.mozilla.org/en/CSS/block_formatting_context
我们添加一条IE 6的独有命令"zoom:1;"就行了，这条命令的作用是激活父元素的"hasLayout"属性，让父元素拥有自己的布局。（它的具体含义，请参见本文的附录。）...:after { content:""; display:block; } .cf:after { clear:both; } /* For IE 6/7 (trigger hasLayout...IE专用属性） overflow: hidden|scroll|auto（只对IE 7及以上版本有效） overflow-x|-y: hidden|scroll|auto（只对IE 7及以上版本有效） hasLayout...可以用Javascript函数hasLayout查看一个元素是否拥有Layout。如果有，这个函数就返回true；否则返回false。...hasLayout是一个只读属性，所以无法使用Javascript进行设置。 [参考阅读] * On having layout （完）
方法二：使用CSS的overflow属性 给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置...CSS的:after伪元素 结合 :after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout...; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* 触发 hasLayout...需要注意的是为了IE6和IE7浏览器，要给clearfix这个class添加一条zoom:1;触发haslayout。
} 需要注意的是，由于IE7及以下的版本不支持 :after 伪元素，因此还需要为 .clearfix 设置width、或 height、或 zoom 等一系列属性，来触发布局（即，使IE私有属性 hasLayout...说明：BFC 与 hasLayout 从表现上来说，hasLayout 跟 BFC 的功能很相似，只是 hasLayout 自身存在很多问题，导致了 IE6-7 中的一系列 bug。...既然 hasLayout 有着跟 BFC 相似的功能，而 IE7 及以下的版本不支持 BFC。...因此，为了避免不同浏览器下的表现差异，在实际开发中，需要创建 BFC 的元素，同时也要触发 hasLayout。 事实上，在实际开发中，很多莫名其妙的问题，都是由此产生的。...当然同样地，如果一个元素没有创建 BFC，也要尽量保证它没有触发 hasLayout 。
如果子元素设置了margin-top/bottom，且父元素没有触发hasLayout，那么子元素的margin就可能转移到父元素。...hasLayout https://www.cnblogs.com/xiaohuochai/p/4845314.html 文章导航 VScode配置远程连接
2.使用overflow 给包含浮动元素的父元素标签添加CSS属性，overflow:hidden or auto; zoom:1 ,其中zoom:1用于兼容IE6,目的是为了触发hasLayout....clearfix{display: inline-block; /*zoom:1;*/ } /* for IE ; or use zoom:1 to trigger the hasLayout...就是给浮动元素的父元素也浮动起来，但这整体又浮动了所以不推荐~ 5.还有一种就是直接给浮动的元素添加属性 display：table; FF Chrome等支持，IE6/IE7测试显示不支持~ 所以还得触发hasLayout
用css, after伪元素， .clearfix:after{} .clearfix{} 2.使父元素BFC(ie8+)或haslayout(ie6/7)...BFC、haslayout通常声明 float:left/right; position: absolute/fixed; overflow: hidden/scroll(ie7+) display:...display:table;clear:both;} //大神推荐写法，与上边任选其一 3 .clearfix{*zoom:1;} 总结 clearfix只能用在包含浮动元素的父级元素上，滥用会有ie低版本的触发haslayout
给父元素设置overflow设置非visible值（auto，hidden） 5，给父元素的display设置为table-cell 7，在ie6,7中，设置zoom或者width，height来触发haslayout...会添加匿名表单，自然也包含table-cell，因此该匿名表单也拥有块级格式化上下文) 4）overflow:auto || hidden || scroll 7方法只对IE6,7有效，触发hasLayout...before,.cf:after { content:""; display:table; } .cf:after { clear:both; } /* For IE 6/7 (trigger hasLayout
.clearfix {*zoom: 1;} /* IE6、7 专有 */ 优点： 符合闭合浮动思想 结构语义化正确 缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout...clearfix:after { clear:both; } .clearfix { *zoom:1; } 优点： 代码更简洁 缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout
> 此时的效果为 优点：符合闭合浮动思想，结构语义化正确 缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout...="small">small 此时的效果为 优点：代码更简洁 缺点：用zoom:1触发hasLayout
2.清除浮动的两大基本方法： 1.给受浮动影响的元素设置clear:both 2.使父元素形成BFC（IE8+，是高级浏览器特有的一个概念）或haslayout（IE6/IE7私有的概念） 两种方法的区别...： clear：与外界还有联系，例如会产生margin重叠的效果 BFC/haslayout（应用于父元素）:封闭，里面的声明不会对外界产生影响，例如float不会出现margin重叠，但也有缺陷，无法应用于所有浏览器
如果按照CSS规范，IE的“良好表现”其实是一个错误的表现，因为IE的hasLayout...然后，float:left等浮动属性可以让inline元素haslayout，会让inline元素表现得跟inline-block元素的特性一样，支持高宽，垂直margin和padding等，所以div...IE6/7负margin隐藏Bug： 发生场合：当给一个有hasLayout的父元素内的非hasLayout元素设置负margin时，超出父元素部分不可见。...解决方法：去掉父元素的hasLayout；或者赋hasLayout给子元素,并添加position:relative; 原理分析：IE6/7独有的hasLayout产生问题。...IE6/7下ul/ol标记消失bug： 发生场合：当ul/ol触发了haslayout并且是在ul/ol上写margin-left，前面默认的ul/ol标记会消失。
猛牛软件 贝贝碰碰车自动挂机 因为外层div的padding为0，内层div的margin转移到外层，原因是没有haslayout
width: auto; } abcdddsdsafdsacdsavdsac 宽度需要指定，这样设置隐藏的宽度，而且也可出发IE67的hasLayout
hasLayout属性不能被直接设置，但是如果一个元素设置了宽高，浮动，绝对定位等待就会改变haslayout。 4.
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
