padding、margin以及清除浮动层引发的异常

亮亮的一篇文章唤醒了我对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值” 的留白。

实在无法解决只能用外套层清除浮动了~~

============================================================
实例地址:

赞(0) 打赏
未经允许不得转载:WEBTian开发 » padding、margin以及清除浮动层引发的异常

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

Tian开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏