在看張鑫旭大佬的我熟知的三种三栏网页宽度自适应布局方法中,看到了一個神奇的東西,和css中有关负边距(negative margin)的一个问题?提出的問題一樣:float狀態下的負邊距。
根據第二個帖子裏的代碼,最終結果是:
c
margin-left:-100%
便可以叠在b上並在左側,但是想讓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的位置對調,也是不會實現這個效果的。
同時,在張鑫旭大佬的帖子裏,#right
想要浮動在右邊,在#left
已經margin-left:-100%
的時候,float:right
是沒辦法達到效果的,會變成下面這種交錯的場景:
審查元素時我們可以看到,這時候的left其實有一個類似
display:block
的效果,它占滿整行,把right擠了下去,但是這時候,display:inline
和display:inline-block
都沒有效果。
所以以後在運用負邊距的時候要注意佈局的問題,并且就如張鑫旭大佬所説,出現佈局bug,排查不易。
僅供個人新手學習使用。