iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 6
1
自我挑戰組

學什麼就寫什麼,知道什麼就分享什麼系列 第 6

與工程師的協作之路-那些年,我們一起混淆的CSS(二)

承「與工程師的協作之路-那些年,我們一起混淆的CSS(一)」篇,講完position之後,今天要來跟大家介紹一個始祖級語法— float

剛接觸這個領域的時候,CSS不像現在有那麼多花俏的語法(例如flex)可以玩,我也還不認識bootstrap,所以當時真的是用float自己手刻出一個RWD網頁~
網頁做完,float變得超熟!往後有新的東西出來,就能比較快的上手與理解。

通常來說如果要維運,你不會一直都在使用新的語法,我自己甚至遇過IE hack(不知道這是什麼?沒關係!Google一下就好了!)

一個長期存在的網站,勢必會有新舊交疊使用的問題,除非公司下定決心整組打掉重練(很難,真的),不然無論是新技術或舊技術都需要略知一二,才有辦法面對這些PM的追殺(!?),不是啦~我是說挑戰!!


那這跟設計又有什麼關係?
當然有!你不理解現有的結構和方法,要怎麼設計出對目前頁面來說合理可用的版面?

Designer「設計圖好了!」
PM「嗯!這樣很好!」
RD「等等,這樣沒辦法做...」
Designer「為什麼?我有看到別人也有這個效果啊~拿給你看~」
RD「可是結構跟技術不同...」
PM「別人可以為什麼我們不行?設計不是有拿範例!你是能力不足還是刻意推託!」
RD「...」

這樣,RD一定會同時覺得設計跟PM是笨蛋...慢慢就會變得不想理人,設計和PM就會走回頭路認為工程師真難溝通了...
不要這樣啦~大家好好相處,好嗎?/images/emoticon/emoticon47.gif


為了不要有這樣的憾事發生!我們就來講一下float

float

這個語法就是「浮動」的意思!他有以下屬性:

  • none
  • left
  • right
  • initial
  • inherit

.none

w3c的說明中,他就是預設值,沒有任何浮動效果的意思,原本該怎麼呈現,他就怎麼呈現!

.left

顧名思義往左邊排隊!
float:left
為什麼要說「排隊」呢?往左邊的話,感覺一切都是那麼自然合理!
但往右邊有些人就會突然意會不過來了喔!
讓我們繼續看下去...

.right

往右邊排隊!
float:right
發現了嗎?排序從「1」、「2」、「3」變成「3」、「2」、「1」了!
這是float:right的特性,所以說他不是飄到右邊而已,而是往右去排隊~
這點是很多初入門者比較容易產生疑惑的地方,給大家參考!


剩下兩個屬性initialinherit,我非常少用到...
根據W3C的解釋,前者是「設為預設值」、後者是「繼承父值」,這個我還真的沒想過什麼情境會用上!
如果有曾經活用的案例,歡迎下方分享給我喔~
這邊就不為他們做示意圖了!


float實戰小技巧

.clear:both

這個語法從字面上看起是「消除兩者」的意思。其實他是指消除左邊和右邊的浮動狀態!
通常來說~如果元素的屬性被改為float,他的後者兄弟就會跟著飄起來~
如果你不希望他的鄰居變成阿飄的話(在亂寫什麼東西!)
試著在鄰居身上(或是偽元素::after上)下這道咒語(不對!)
他就會乖乖的回到自己該去的地方囉~/images/emoticon/emoticon12.gif

.overflow:hidden

使用float來排版,經常會發現他的容器高度不見了!!導致爆版錯位...
別驚慌~試著在他的容器上加上overflow:hidden吧!
高度就會乖乖回來囉~(使用了這道咒語之後都長高了呢~)
overflow:hidden


試著動手寫寫看~切版也是充滿奧秘而且很有趣的喔!/images/emoticon/emoticon24.gif/images/emoticon/emoticon24.gif
別再誤會工程師啦~~~~~


呼~我還活著(感動落淚)!下次見!/images/emoticon/emoticon29.gif


上一篇
與工程師的協作之路-那些年,我們一起混淆的CSS(一)
下一篇
與工程師的協作之路-那些年,我們一起混淆的CSS(三)
系列文
學什麼就寫什麼,知道什麼就分享什麼31

尚未有邦友留言

立即登入留言