亮亮的一篇文章唤醒了我对clear层的重新研究,在新的一轮挖掘之后,终于解决了困扰半年的 mirror margin bug ,特发文庆贺。
亮亮文章中的clear层使用外套层的解决方案让人眼前一亮,确实好用,我找了很久都没找出大的bug。但是,单独的clear层是我一贯的主张,有一点是好的,更灵活更自由。暂且把亮亮的clear层命名为.cll吧,我列出html代码说明。
<div class=”cll”>
<div class=”left”>float layer 1</div>
<div class=”left”>float layer 2</div>
</div>
看似比插入空的清除浮动层减少了代码,其实不然,这个外套有太大的局限,实际使用必然是作为一个额外新增的层,否则,外套层作为容器,其width属性和overflow属性会给其内容带来未知的影响,比如,它不能接收float属性,不能接收height属性,而且,如果希望在 float layer 1、2 之下新增 新的浮动层 3、4,就得重新套一遍<div class=”cll”> content here </div>
其实跟单独的浮动层在代码量上没什么变化,一个套了一个额外的层,一个插入了一个空层。
而,使用简单的没有经过优化的清除浮动层,是显然靠不住的,无数的bug可能源于清除浮动层,所以要对清除浮动层的 css样式进行优化,请仔细参看以下内容。[
文中针对“ 浮动层套浮动层并在外层使用padding 而产生的mirror margin bug ” 的解决方案:优化clear层 +display:inline。 其结果只是将mirror margin bug 转移走了而已。使用优化过的clear层 <div style=”clear:both;+display:inline”></div> ,在以下情况再度发现mirror margin bug !!
条件:浏览器当然还是ie(6,7),外层无浮动(宽度auto,设置padding-top)套内层浮动层,并用单独的优化过的clear 空层清除浮动。想必这一结构是我们最常写的结构了~~~。
bug症状:内层浮动层与浮动层之间的垂直方向上,外层的padding-top被复制到这里了~~,+display:inline而且还会伴随高度或者padding-bottom的异常~~,可以通过设置外层的宽度或设置外层zoom:1解决以上问题,但从模块化工程化的角度出发,不能要求所有这样的外层设置zoom属性,所以可以宣布《padding、margin以及清除浮动层引发的异常》文中对 clear层的优化无效了~~。
—————还是回到之前的问题mirror margin bug
条件:浏览器当然还是ie(6,7),外层浮动(与宽度无关,设置padding-top)套内层浮动层,并用单独的优化过的clear 空层在内层清除浮动。
bug症状:在清除浮动的地方多出 “大小为外层padding-top值” 的留白。
实在无法解决只能用外套层清除浮动了~~
============================================================
实例地址:
最新评论
写的挺好的
有没有兴趣翻译 impatient js? https://exploringjs.com/impatient-js/index.html
Flexbox playground is so great!
感谢总结。
awesome!
这个好像很早就看到类似的文章了
比其他的教程好太多了
柯理化讲的好模糊…没懂