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

日期：2013-12-14  来源：攀枝花惠康网络公司

亮亮的一篇文章叫醒了我对clear层的年夜头研究，在新的一轮挖掘之后，终于解决了困扰半年的 mirror margin bug ，特发文道贺。

看似比插入空的断根浮动层削减了代码，其实否则，这个外衣有太年夜的局限，现实使用必然是作为一个额外新增的层，否则，外衣层作为容器，其width属性和overflow属性会给其内容带来未知的影响，好比，它不能领受float属性，不能领受height属性，而且，如不美观但愿在 float layer 1、2 之下新增 新的浮动层 3、4，就得年夜头套一遍<div class=”cll”> content here </div>

<div class=”cll”>

bug症状：在断根浮动的处所多出 “巨细为外层padding-top值” 的留白。

<div class=”left”>float layer 1</div>

<div class=”left”>float layer 2</div>

</div>

亮亮文章中的clear层使用外衣层的解决方案让人面前一亮，确实好用，我找了良久都没找出年夜的bug。可是，零丁的clear层是我一贯的主张，有一点是好的，更矫捷更自由。暂且把亮亮的clear层命名为.cll吧，我列出html代码声名。

其实跟零丁的浮动层在代码量膳缦慊什么转变，一个套了一个额外的层，一个插入了一个空层。

而，使用简单的没有经由优化的断根浮动层，是显然靠不住的，无数的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 空层断根浮动。想必这一结构是我们最常写的结构了~~~。

―――――仍是回到之前的问题mirror margin bug

前提：浏览器当然仍是ie(6,7)，外层浮动（与宽度无关，设置padding-top）套内层浮动层，并用零丁的优化过的clear 空层在内层断根浮动。

bug症状：内层浮动层与浮动层之间的垂直标的目的上，外层的padding-top被复制到这里了~~，+display:inline而且还会陪同高度或者padding-bottom的异常~~，可以经由过程设置外层的宽度或设置外层zoom:1解决以上问题，但年夜模块化工程化的角度出发，不能要求所有这样的外层设置zoom属性，所以可以公布揭晓《padding、margin以及断根浮动层激发的异常》文中对 clear层的优化无效了~~。

其实无法解决只能用外衣层断根浮动了~~

============================================================
实例地址：http://www.f-dev.com/wp-content/uploads/2008/03/subproject.html