iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 5
0
自我挑戰組

向CSScoke重新學習CSS系列 第 5

第五天:老派的Float !!

  • 分享至 

  • xImage
  •  

觀看金魚都能懂網頁設計入門 9

什麼時候會用到呢?

在舊有的系統維護時會運用到,而且float可以運用在文繞圖或是多欄版式面邊排

想像一下Float在現實中長怎麼樣?

可以以文繞圖的方式或是以下圖片做比喻,這朵花被周圍的小葉子圍繞住,就像是img被p段落所包圍
這樣

Float(浮動)基本特性

有靠左及靠右,沒有靠中間

float: left;
float: right;

float 會搭配 clear 做使用
clear用處:
原理 => 父層是被clear拉開來的,而不是被內容所稱開
clear 會閃開浮動物件,它會在所有浮動物件的最下方,來把父層做拉開
這邊是實作一下兩欄排版,運用了float 搭配 clearfix
https://codepen.io/mikeyam/pen/GRZYdLj

小金魚趕快來練習一下float技術,多學一點就是經驗累積


上一篇
第四天:盒模型計算
下一篇
第六天:block和inline的愛恨情仇?
系列文
向CSScoke重新學習CSS30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言