CSS float浮動

admin發表於2018-08-03
CSS

float翻譯成中文有使物體浮動護著使物體漂浮的作用。

有圖為證：

a:3:{s:3:\"pic\";s:43:\"portal/201808/29/141156wzu2r5pim3ttsubs.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

現在我們就可以想象一下物體浮動的狀態，進而引申到一個div元素浮動是什麼樣的狀態。

當然浮動不是完全自由的，需要遵循一定的規則，本文就是用來介紹CSS中浮動的規則。

一.浮動的必要性：

如果有兩個div元素，想要使其呈現左右佈局，如果沒有浮動，將非常麻煩，比如使用position定位方式，那如果在調整瀏覽器視窗大小等操作的時候，可能會出現意想不到的情況。如果使用浮動將會非常輕鬆的實現預期效果。還有一個常見的文字環繞圖片效果，文章後面會有介紹。

二.CSS浮動的使用：

float浮動是CSS佈局中最為基礎且必須要掌握的知識點之一，否則你將是一個前端局外人。

語法結構：

[CSS] 純文字檢視 複製程式碼
float：none | left | right

引數解析:

（1）.none：規定不浮動。

（2）.left：規定元素向左浮動。

（3）.right：規定元素向右浮動。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
.box{ 
  width:300px; 
  height:200px; 
  background-color:#000; 
} 
.ant{ 
  width:100px; 
  height:100px; 
  background-color:#ff6a00; 
} 
</style> 
</head> 
<body> 
<div class="box"> 
  <div class="ant"></div> 
</div> 
</body> 
</html>

上面程式碼中，兩個div元素都沒有浮動，兩個元素都會位於它們各自父元素的左上角（暫且不考慮內外邊距）。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
.box{ 
  width:300px; 
  height:200px; 
  background-color:#000; 
} 
.ant{ 
  width:100px; 
  height:100px; 
  background-color:#ff6a00;
  float:right; 
} 
</style> 
</head> 
<body> 
<div class="box"> 
  <div class="ant"></div> 
</div> 
</body> 
</html>

上面程式碼中，子div元素設定為右浮動，那麼它會盡量向右漂浮，知道遇到它的包含框。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div {
  width:80px;
  height:80px;
  background:green;
  margin:10px;
  float:right;
}
</style> 
</head> 
<body> 
  <div></div>
  <div></div>
</body> 
</html>

兩個塊級元素預設是各自佔據一行。

關於塊級元素可以參閱CSS塊級/內聯元素一章節。

上述程式碼中，兩個div採用了，它們就可以位於同一行。

前面程式碼中講過，浮動元素浮動直到遇到包含框，其實浮動元素碰到另一個浮動元素也會停止浮動。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div {
  height:80px;
}
.ant-float {
  width:80px;
  background:green;
  float:left;
}
.ant {
  width:100px;
  background:red;
}
</style> 
</head> 
<body> 
<div class="ant-float"></div>
<div class="ant"></div>
</body> 
</html>

對元素施加浮動之後，元素會脫離文件流，恰如起名，真正的浮動起來。

那麼它們原來佔據的空間就會被看騰空，它後面的元素就會填補這個空間，上述程式碼中ant-float元素浮動起來，它後面的ant元素會填補它原來佔據的空間。

三.浮動元素對內聯元素或者塊級元素影響：

內聯元素在預設狀態下，是不可以設定尺寸的。

對其施加浮動，內聯元素會被轉換為內聯塊級元素，這時就可以對齊設定元素尺寸，或者正確的設定上下內外邊距。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
a {
  float:left;
  width:100px;
  height:100px;
  line-height:100px;
  background-color:#ccc;
  text-align:center;
}
 
</style> 
</head> 
<body> 
<a href="#">螞蟻部落</a>
</body> 
</html>

再來看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div {
  float:left;
  height:100px;
  line-height:100px;
  background-color:#ccc;
}
 
</style> 
</head> 
<body> 
<div>螞蟻部落</div>
</body> 
</html>

預設狀態下，塊級元素如果不規定寬度，預設是100%，新增浮動之後，它能夠實現寬度自適應。

四.文字環繞圖片：

實現文字環繞圖片功能的程式碼非常的簡單，但是裡面還是涉及到不少的內容。

所以詳細內容可以參閱CSS文字環繞圖片一章節。

相關文章