CSS 簡明教程 - 浮動屬性 ( float )
浮動屬性 float 可以讓 HTML 元素向左或向右移動，直到其外邊緣接觸包含它的元素的邊界，同時，浮動元素周圍的其它元素也將重新排列
浮動的元素通常用在：
1.段落中的圖像向左或向右浮動，以便文本環繞它們 2.製作現代頁面配置
浮動屬性 float
CSS 中的 float 屬性可以浮動元素
float屬性可選的值有四個
值 | 說明 |
left | 元素在其父容器中向左浮動 |
right | 元素在其父容器中向右浮動 |
none | 預設，元素不浮動 ( 將顯示在它在頁面中本該出現的位置 ) |
inherit | 該元素繼承其父級的浮點值 |
下面的示例指定圖像浮動到一段文本的左側
<meta charset="utf-8">
<link href="/static/next/css/tryit.css?v=2017082407" rel="stylesheet"/>
<style>
span
{float:left;
width:1.2em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
</style>
<p>
這是一些文本。
這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
<span><img src="/static/icon/css_32x32.png" /></span>
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
</p>
<p>
在上面的段落中, 第一個字嵌入在span 元素中。
這個 span 元素的寬度是當前字體大小的1.2倍。
這個 span 元素是當前字體的400%(相當大)， line-height 為80%。
文字的字體為"Algerian"。
</p>
<footer>簡單教程，簡單程式設計<br/>Copyright © 簡單教程 www.twle.cn</footer>
同樣的，我們還可以指定圖片浮動到一段文本的右側
相鄰的浮動元素
我們可以使用 float屬性來水準排列元素，並使每個浮動元素彼此相鄰
這樣，我們就能實現一個簡單的水準功能表
例如
<html>
<head>
<meta charset="utf-8" />
<style>
ul {list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {float: left;
}
li a {display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {background-color: #111;
}
.active {background-color: red;
}
</style>
</head>
<body>
<ul>
<li><a href="#home" class="active">首頁</a></li>
<li><a href="#news">新聞</a></li>
<li><a href="#contact">聯繫我</a></li>
<li><a href="#about">關於</a></li>
</ul>
</body>
</html>
我們還可以使用此功能實現水準圖像清單並設置圖像之間的間距，例如
<html>
<meta charset="utf-8" />
<head>
<style>
* {box-sizing: border-box;
}
.img-container {float: left;
width: 33.33%;
padding: 5px;
}
.clearfix::after {content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2>圖像清單</h2>
<p>使用 CSS float 屬性，非常簡單的就能實現圖片清單</p>
<div class="clearfix">
<div class="img-container">
<img src="img_fjords.jpg" alt="Fjords" style="width:100%">
</div>
<div class="img-container">
<img src="img_forest.jpg" alt="Forest" style="width:100%">
</div>
<div class="img-container">
<img src="img_mountains.jpg" alt="Mountains" style="width:100%">
</div>
</div>
</body>
</html>
