已經太久沒有接觸了，現在又得重新開始慢慢把記憶找回來了，果然程式這種東西就是需要不停的練習阿。
今天先從前陣子才又回來摸索的CSS開始。
Float浮動元素的效果，就是可以將兩個或兩個以上的DIV或是區塊元素並排在一起。
1
2
| float: left ;
float: right ;
|
浮動元素有個特性，他會看父元素的像素多少，如果父元素像素(比如瀏覽器寬度)比浮動元素並排後的總像素小的話，排不下去的就會往下排列。
比如說
圖一:
圖二:
當父元素(圖片無填色方框)尺寸等於或是大於浮動元素，這時候就會呈現並排效果(如圖一)
但是如果浮動元素尺寸寬度加總超過了父元素尺寸，則會往下排列(圖二)
但是因為浮動元素的特性，他不會將父元素的高度撐高，這時候如果後面繼續寫程式碼加入元素的話會變成有重疊的問題，解決方式是使用clear語法清除浮動。
clear 清除浮動
浮動元素顧名思義就是浮動在版面之上，所以如果接著順序往下寫的程式碼沒有使用clear清除浮動的話，畫面會重疊，如果後面的元素不打算做浮動元素的話，可以寫上clear語法
比如說
1
2
3
4
| <div class="header">表頭</div>
<div class="menu">選單</div>
<div class="content">內容</div>
<div class="footer">頁底</div>
|
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| .header{
height: 50px;
width: 800px;
background-color: blue;
}
.menu{
height: 50px;
width: 300px;
background-color:green;
float:left;
}
.content{
height: 50px;
width: 300px;
background-color:red;
float:left;
}
.footer{
height: 60px;
width: 800px;
background-color: yellow;
}
|
以上是沒有使用clear語法的程式碼，結果會如下圖
1
2
3
4
5
| <div class="header">表頭</div>
<div class="menu">選單</div>
<div class="content">內容</div>
<div class="clearfix"></div>
<div class="footer">頁底</div>
|
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| .header{
height: 50px;
width: 800px;
background-color: blue;
}
.menu{
height: 50px;
width: 300px;
background-color:green;
float:left;
}
.content{
height: 50px;
width: 300px;
background-color:red;
float:left;
}
.clearfix{
clear: both;
}
.footer{
height: 60px;
width: 800px;
background-color: yellow;
}
|
以上是使用clear語法的程式碼，結果如下圖
