一些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
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还是很有必要的。
而其原因在于，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 以上是对最近看到的有关清除浮动的资料，所做的思考总结。
由于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 （完）
margin-bottom的bug是容器div的 'zoom:1' 触发了 hasLayout，其内部浮动子元素也参与到了容器的高度计算之中 在 IE6 IE7 IE8(Q)中，容器div的 'zoom...:1' 触发了 hasLayout，其内部浮动子元素也参与到了容器的高度计算之中。...若容器高度不定，则要避免在触发了 hasLayout 的容器内的浮动子元素上设置 'margin-bottom' 特性，可以通过为容器设置 'padding-bottom' 达到相似的效果。...只要不同时触发父元素hasLayout、子元素左浮动、左浮动子元素拥有非零的 margin-bottom 值，这三个条件中任意一项，均可解决此问题。
方法二：使用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。
如果子元素设置了margin-top/bottom，且父元素没有触发hasLayout，那么子元素的margin就可能转移到父元素。...hasLayout https://www.cnblogs.com/xiaohuochai/p/4845314.html 文章导航 VScode配置远程连接
} 需要注意的是，由于IE7及以下的版本不支持 :after 伪元素，因此还需要为 .clearfix 设置width、或 height、或 zoom 等一系列属性，来触发布局（即，使IE私有属性 hasLayout...说明：BFC 与 hasLayout 从表现上来说，hasLayout 跟 BFC 的功能很相似，只是 hasLayout 自身存在很多问题，导致了 IE6-7 中的一系列 bug。...既然 hasLayout 有着跟 BFC 相似的功能，而 IE7 及以下的版本不支持 BFC。...因此，为了避免不同浏览器下的表现差异，在实际开发中，需要创建 BFC 的元素，同时也要触发 hasLayout。 事实上，在实际开发中，很多莫名其妙的问题，都是由此产生的。...当然同样地，如果一个元素没有创建 BFC，也要尽量保证它没有触发 hasLayout 。
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
2.清除浮动的两大基本方法： 1.给受浮动影响的元素设置clear:both 2.使父元素形成BFC（IE8+，是高级浏览器特有的一个概念）或haslayout（IE6/IE7私有的概念） 两种方法的区别...： clear：与外界还有联系，例如会产生margin重叠的效果 BFC/haslayout（应用于父元素）:封闭，里面的声明不会对外界产生影响，例如float不会出现margin重叠，但也有缺陷，无法应用于所有浏览器
> 此时的效果为 优点：符合闭合浮动思想，结构语义化正确 缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout...="small">small 此时的效果为 优点：代码更简洁 缺点：用zoom:1触发hasLayout
如果按照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
table-cell不兼容IE6,7.但是可以通过触发hasLayout来实现近似的效果。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
