內容目錄
float的介紹
float是較早期被網頁使用來排版的屬性，所以瀏覽器的支援度也達到非常高，可以使你的區塊產生浮動效果，藉此可以達到水平左右移動效果，以及常見的文字繞圖作用
right、left、none (預設值)
float中的right、left、none這三個值是最常被使用，可以快速達到排版效果
- righ：向右
- left：向左
- none：預設值，沒有float效果
呈現方式
- 設置六個box
- 邊框1px紅色
- 粉紅背景
- 高跟寬100px
- 設定1.2是none
- 設定3.4是left
- 設定5.6是right
HTML
<div class=”box1″>我是1 </div>
<div class=”box2″>我是2 </div>
<div class=”box3″>我是3 </div>
<div class=”box4″>我是4 </div>
<div class=”box5″>我是5 </div>
<div class=”box6″>我是6 </div>
CSS
< div {
border: 1px solid red;
background: pink;
width: 100px;
height: 100px;
}
.box1 {
float: none;
}
.box2 {
float: none;
}
.box3 {
float: left;
}
.box4 {
float: left;
}
.box5 {
float: right;
}
.box6 {
float: right;
}
程式執行結果
可以看到設定為none是不會動作的，而預設就是這樣，設定left會從第一個被設定float的3那行開始向左排版，而被設定right的也從右邊排過去，可以看到是先排5在排6
文字繞圖效果
由於float可以做到浮動效果，所以佔滿整行的版面，可以讓文字出現在他的旁邊，而文字量超過設置的高度，則繼續往下寫滿
呈現方式
- 設置四個box
- 背景兩個邊框1px藍色，淺藍背景
- 裡面兩個邊框1px紅色，粉紅背景
- 背景高跟寬300px
- 裡面高跟寬100px
- 第一個組合設置為none
- 第二個組合設置為left
HTML
<div class=”back”>
<div class=”box1″>我是none</div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore pariatur esse
molestias asperiores veniam
temporibus iusto quidem, minima quis in aut voluptatum, atque nostrum! At deserunt non dolore doloribus totam.
</div>
<div class=”back”>
<div class=”box3″>我是right</div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore pariatur esse
molestias asperiores veniam
temporibus iusto quidem, minima quis in aut voluptatum, atque nostrum! At deserunt non dolore doloribus totam.
</div>
CSS
[class^=”box”] {
border: 1px solid red;
background: pink;
width: 100px;
height: 100px;
}
.box1 {
float:none;
}
.box3 {
float: left;
}
.back {
width: 300px;
height: 300px;
border: 1px solid blue;
background: rgb(81, 165, 221);
margin-top: 10px;
}
程式執行結果
可以看到設置組合一，會因為裡面的盒子，文字只能避開往下排，但設置float之後，文字會繞著盒子走，直到超出高度才會繼續往下排
與display:inline-block的差別
float可以直接往右排，也就是用right，而inline-block只能往左排，且inline-block做不到文字繞圖效果
※這裡使用到display:inline-block觀念，可以參考此文章
呈現方式
- 設置四個box
- 背景兩個邊框1px藍色，淺藍背景
- 裡面兩個邊框1px紅色，粉紅背景
- 背景高跟寬300px
- 裡面高跟寬100px
- 第一個組合設置為 display:inline-block
- 第二個組合設置為left
HTML
<div class=”back”>
<div class=”box1″>我是none</div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore pariatur esse
molestias asperiores veniam
temporibus iusto quidem, minima quis in aut voluptatum, atque nostrum! At deserunt non dolore doloribus totam.
</div>
<div class=”back”>
<div class=”box3″>我是right</div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore pariatur esse
molestias asperiores veniam
temporibus iusto quidem, minima quis in aut voluptatum, atque nostrum! At deserunt non dolore doloribus totam.
</div>
CSS
[class^=”box”] {
border: 1px solid red;
background: pink;
width: 100px;
height: 100px;
}
.box1 {
display: inline-block;
}
.box3 {
float: left;
}
.back {
width: 300px;
height: 300px;
border: 1px solid blue;
background: rgb(81, 165, 221);
margin-top: 10px;
}
程式執行結果
可以看到跟剛剛範例一樣，唯一不同的第一組合加入了display:inline-block所以他只能讓一行文字上來跟他並排，超過的部分必須往下排
刪除float的效果
float有個很麻煩的問題在於，設置漂浮後，也會影響後面加入的區塊，可以想像我們平時移動為上下左右，有個東西飄在上面，那你就只能往他下面擺
舉例：設置過float的區塊，像是天上的雲可以在上面左右移動，而人就像是沒設置float的，只能在地面左右移動
要刪除則可以使用clear fix來進行
呈現方式
- 設置四個box
- 下面兩個邊框1px藍色，淺藍背景
- 上面兩個邊框1px紅色，粉紅背景
- 下面高跟寬300px
- 上面高跟寬100px
- 第一個組合設置為沒有加入 clear fix
- 第二個組合設置為有加入 clear fix
HTML
<div class=”box7″>我沒clear fix</div>
<div class=”back1″>我是1</div>
<div class=”box8″>我用clear fix</div>
<div class=”clear-fix”></div>
<div class=”back2″></div>
CSS
[class^=”box”] {
border: 1px solid red;
background: pink;
width: 100px;
height: 100px;
}
[class^=back] {
width: 300px;
height: 300px;
border: 1px solid blue;
background: rgb(81, 165, 221);
margin-top: 10px;
}
.clear-fix {
content: “”;
display: table;
clear: both;
}
.box7 {
float: left;
margin-top: 10px;
程式執行結果
可以看到沒設置clear fix的狀況下，下一個區塊直接往下面擺，造成排版混亂，加入clear fix之後，則可以使下一個區塊的float效果消失，變回正常排版