CSS Float(浮動)
CSS Float(浮動)
#什麼是 CSS Float（浮動）？
CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。
Float（浮動），往往是用於圖像，但它在佈局時一樣非常有用。
元素怎麼浮動
元素的水平方向浮動，表示元素只能左右移動而無法上下移動。
一個浮動元素會盡量向左或向右移動，直到它的外緣碰到包含框或另一個浮動框的邊框為止。
浮動元素之後的元素將圍繞它。
浮動元素之前的元素將不會受到影響。
如果圖像是右浮動，下面的文字流將環繞在它左邊：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
img
{
float:right;
}
</style>
</head>
<body>
<p>在下面的段落中，我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
<p>
<img src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="95" height="84" />
人生如梦，亦哭亦歌，叶凋零，落叶随水流。水冰凉，曲终人已散。漪沫温婉，敛眸芬芳，轻拾一抹文字的清香，在时光的水墨里，听一段心灵，撷一段清澈;在心与心的重逢，心与心的微笑，阔一别红尘纷扰，素年锦时，这何尝不是一种最美的守候。人生在世，为求知己。吾无知己，甚感孤独。 为求知己，吾已踏千山，走万水。 惜无人知吾，无人解吾。 甚难受，乃，莫过于父母同不知吾心。 何人能知吾，吾心孤独。 知己?何君是也?
</p>
</body>
</html>運行程式嘗試
彼此相鄰的浮動元素
如果你把幾個浮動的元素放在一起，如果有空間的話，它們將彼此相鄰。
在這裡，我們對圖片廊道使用float 屬性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
</style>
</head>
<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="107" height="90">
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="107" height="80">
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="116" height="90">
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="120" height="90">
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="107" height="80">
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="116" height="90">
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="120" height="90">
</body>
</html>運行程式嘗試
清除浮動- 使用clear
元素浮動之後，周圍的元素會重新排列，為了避免這種情況，使用clear 屬性。
clear 屬性指定元素兩側不能出現浮動元素。
使用clear 屬性在文字中新增圖片廊：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</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="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="107" height="90">
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="107" height="80">
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="116" height="90">
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="120" height="90">
<h3 class="text_line">第二行</h3>
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="107" height="90">
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="107" height="80">
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="116" height="90">
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="120" height="90">
</body>
</html>執行程式嘗試一下
##更多實例
讓段落的第一個字母浮動到左邊 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
span
{
float:left;
width:1.2em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
</style>
</head>
<body>
<p>
<span>是</span>
谁曾说过，有故事的人注定会相遇，不管是以哪种方式。 对有感情不愿亏欠谁，却还是欠着一些。或许等到没了信心时，等到没有希望的时候，会悄然撤离.人人都有过等待与被等待的时候。离开永远比相遇更容易，因为相遇是几亿人中一次的缘分，而离开只是两个人的结局。
</p>
</body>
</html>執行程式嘗試實例
使用 float 建立一個網頁頁首、頁尾、左邊的內容和主要內容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div.container
{
width:100%;
margin:0px;
border:1px solid gray;
line-height:150%;
}
div.header,div.footer
{
padding:0.5em;
color:white;
background-color:gray;
clear:left;
}
h1.header
{
padding:0;
margin:0;
}
div.left
{
float:left;
width:160px;
margin:0;
padding:1em;
}
div.content
{
margin-left:190px;
border-left:1px solid gray;
padding:1em;
}
</style>
</head>
<body>
<div class="container">
<div class="header"><h1 class="header">w3cschool.cc</h1></div>
<div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div>
<div class="content">
<h2>Free Web Building Tutorials</h2>
<p>At w3cschool you will find all the Web-building tutorials you need,
from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
<p>w3cschool - The Largest Web Developers Site On The Net!</p></div>
<div class="footer">Copyright 1999-2005 by Refsnes Data.</div>
</div>
</body>
</html>執行程式嘗試一下
CSS 中所有的浮動屬性
"CSS" 列中的數字表示不同的CSS 版本（CSS1 或CSS2）定義了該屬性。
| 屬性 | 描述 | 值 | CSS |
|---|---|---|---|
| 指定不允許元素周圍有浮動元素。 | left |
right # both # none | inherit |
| #float | #指定一個盒子（元素）是否可以浮動。 left right | none |
1
