在看張鑫旭大佬的我熟知的三種三欄網(wǎng)頁寬度自適應(yīng)布局方法中琐驴,看到了一個神奇的東西拇泣,和css中有關(guān)負邊距(negative margin)的一個問題掂之?提出的問題一樣:float狀態(tài)下的負邊距掠哥。
根據(jù)第二個帖子裏的代碼霞赫,最終結(jié)果是:
c
margin-left:-100%
便可以疊在b上並在左側(cè)梁棠,但是想讓c疊在a上置森,不可以magrin-left:-200%,衹能margin-top:-c的高度
符糊。張鑫旭大佬帖子裏的第二種排版方法也是這樣凫海。當時看的時候思考了一下爲什麼要
margin-left:-100%
,後來看到了這個回答:個人理解是男娄,c的
margin-left:-100%
其實是針對于它的上一層b行贪,因爲b的寬度是100%。但是這個負邊距只針對上一層模闲,如果是上上層則無效建瘫。所以c的margin-left:-200%
是不會疊在a上。并且如果b尸折、c的位置對調(diào)啰脚,也是不會實現(xiàn)這個效果的。
同時实夹,在張鑫旭大佬的帖子裏橄浓,#right
想要浮動在右邊晾咪,在#left
已經(jīng)margin-left:-100%
的時候,float:right
是沒辦法達到效果的贮配,會變成下面這種交錯的場景:
審查元素時我們可以看到谍倦,這時候的left其實有一個類似
display:block
的效果,它占滿整行泪勒,把right擠了下去昼蛀,但是這時候,display:inline
和display:inline-block
都沒有效果圆存。
所以以後在運用負邊距的時候要注意佈局的問題叼旋,并且就如張鑫旭大佬所説,出現(xiàn)佈局bug沦辙,排查不易夫植。
僅供個人新手學(xué)習(xí)使用。