CSS Float(浮動)
CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。
Float（浮動），往往是用於圖像，但它在布局時一樣非常有用。
包含塊：
在說明float帶來的詳細細節之前，我們首先要了解一個概念。
包含框：浮動元素的包含框就是離浮動元素最近的塊級祖先元素
Html代碼：
1
2
3
4
5
6
|
<div class="box">
<span class="float-ele">
浮動元素
</span>
普通文檔流普通文檔流普通文檔流普通文檔流普通文檔流普通文檔流普通文檔流普通文檔流普通文檔流普通文檔流普通文檔流普通文檔流普通文檔流普通文檔流普通文檔流
</div>
|
CSS代碼：
1
2
|
.box { background: #00ff90; padding: 10px; width: 500px; }
.float-ele { float: left; margin: 10px; padding: 10px; background: #ff6a00; width: 100px; text-align: center; }
|
效果圖
元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。
一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含塊或另一個浮動框的邊框為止（邊框為盒子模型邊框，考慮padding，margin等因素）。
浮動元素之後的元素將圍繞它。(即使浮動元素時塊元素，也是圍繞它，比如上例中把span改成div，效果一樣)
浮動元素之前的元素將不會受到影響。
如果圖像是右浮動，下面的文本流將環繞在它左邊：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
img
{
float:right;
}
</style>
</head>
<body>
<p>在下面的段落中，我們添加了一個 <b>float:right</b> 的圖片。導致圖片將會浮動在段落的右邊。</p>
<img src="logocss.gif" width="95" height="84" />
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
</p>
</body>
</html>
彼此相鄰的浮動元素
如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
</style>
</head>
<body>
<h3>圖片庫</h3>
<p>試著調整窗口,看看當圖片沒有足夠的空間會發生什麽。</p>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
</body>
</html>
如果不設置margin，圖片將僅僅相鄰，沒有空隙
第一行的圖片總寬度超過了包含塊的寬度將自動換行（外邊緣碰到包含塊）
清除浮動 - 使用 clear
元素浮動之後，周圍的元素會重新排列，為了避免這種情況，使用 clear 屬性。
clear 屬性指定元素兩側不能出現浮動元素。
使用 clear 屬性往文本中添加圖片廊：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
.text_line
{
clear:both;
margin-bottom:2px;
}
</style>
</head>
<body>
<h3>圖片庫</h3>
<p>試著調整窗口,看看當圖片沒有足夠的空間會發生什麽。.</p>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
<h3 class="text_line">第二行</h3>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
</body>
</html>
運行看效果
CSS Float(浮動)