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?？墒牵愣〉腸lear層是我一貫的主張，有一點是好的，更矯捷更自由。暫且把亮亮的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 ?。?/p>

前提：瀏覽器當然仍是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