網站首頁 網站建設 公司動態 行業新聞 案例展示 關于我們

文章內容

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

文章來源:攀枝花惠康網絡公司

惠康網絡,是一家專業從事攀枝花網站建設,攀枝花網站制作,攀枝花網站設計公司,提供網站建設一條龍服務(網站域名注冊+網站服務器租用+網站開發+網站維護+網站營銷推廣),惠康網絡立足攀枝花,輻射全中國,攀枝花惠康網絡的客戶已經遍布國內各地大中小城市,我們高效優質的網站建設服務深受用戶好評。

客服熱線:tel(謝先生)  客服QQ:1323605005  
服務郵箱:[email protected](售前咨詢)  [email protected](技術部)  [email protected](售后服務)
公司地址:四川省攀枝花市
郵編:617200

青海十一选五开奖图