探討css grids與各種clearfix方法及優缺點

使用了yui3 grids,發現與原來的yui2 grids大大的改變,設計概念偏向960 gs,利用inline-block概念完成布局,避免floating,代表避免了bugs,

css為

雖然說是避免了IE的bugs(隨後探討),但是也把css布局的最大好處給消除掉了,就是float屬性,此屬性乃是css裡最重要的屬性之一,其中一點就是可以把重點的內容的html,在放整頁結構的前面,但是在視覺上,其實是在右側,以便讓搜索引擎知道這段內容是比其他還來的重要,如yui2 裡的

Main Content

會永遠在整份文件的前方,無論在視覺上是靠左或靠右,如果以yui3 grids的話,都會以視覺決定前後,左邊在前,右邊在後,真懷念與Nate(yui2 grid guru)相處的時光阿,基本上我會認為yui2 grids設計的比yui3 grids好的多。 因為探討了yui2 & yui3 grids所以也看到了yui2裡的css布局,利用了float,margin-left:-npx等等的屬性,所以clearfix也很重要,yui2裡面的clearfix如下:

而參考http://www.positioniseverything.net/easyclearing.html,此篇有了content=”.”,visibility:hidden,height:0等不同的屬性,於是去研究了有各種clearfix方法如下:

  • easycleafix

    參考positionisverything篇,yui2 grids也是類似原理去做的clearfix,也是我在雅虎最早被training開始使用的clearfix方法

    但此種方式會產生margin collaspse的bug!

  • overflow:hidden to clearfix

    但在css guru, Stubbornella在twitter討論

    But with :before, needs content:”.” to prevent margin collapse of non-floats in non-IE, I give the content 0px height, 0px font-size among other things to be sure it
    takes up no space. Should not be needed if clearfix uses overflow:hidden;height:0; (+visibility:hidden;

    ,順便參考此篇http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/ ,所以clearfix會變成:

    clearfix(position is everything提出)與overflow:hidden是解決clearfix最受歡迎的兩種方法,那現在綜合在一起,可以使用兩種的好處並解決了margin collapse的bug

    What triggers block formatting contexts:(為什麼可以用overflow屬性來解決floating的原理)

    • floats,
    • absolutely positioned elements,
    • inline-blocks,
    • table-cells,
    • table-captions,
    • elements styled with “overflow” (any value other than “visible”)
  • micro clearfix hack

    http://nicolasgallagher.com/micro-clearfix-hack/ 參考此篇,提出新的方式去做clearfix的問題

結論:

最後針對各種clearfix寫出的test case,可以看出哪邊有margin collapse的問題,請參考 http://jsfiddle.net/necolas/QZXS6/

另外yui2 grids與yui3 grids的主要差異為yui3 grids不用任何的floating,當然可以避免許多的bug,但是yui2 grids利用了floating的優勢把yui-main裡的主要內容,不管視覺上的結構如何,都可以擺在整份html文件的相對前方,增加SEO與閱讀重要性,我覺得是十分重要的概念,yui3 grids方法雖然好用直覺,但應該被修正,了解原理,並依照各種情況使用適合自己的grids才是最重要的。

yui2 grids還有個好處,只要改變一個classname就可以不用改變html結構而造成視覺上的改變,我覺得在維護上也是很重要的方便。

參考相關連接

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *