CSS Float(浮動(dòng))
CSS?Float(浮動(dòng))
#什麼是 CSS Float（浮動(dòng)）？
CSS 的 Float（浮動(dòng)），會(huì)使元素向左或向右移動(dòng)，其周圍的元素也會(huì)重新排列。
Float（浮動(dòng)），往往是用於圖像，但它在佈局時(shí)一樣非常有用。
元素怎麼浮動(dòng)
元素的水平方向浮動(dòng)，表示元素只能左右移動(dòng)而無法上下移動(dòng)。
一個(gè)浮動(dòng)元素會(huì)盡量向左或向右移動(dòng)，直到它的外緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?
浮動(dòng)元素之後的元素將圍繞它。
浮動(dòng)元素之前的元素將不會(huì)受到影響。
如果圖像是右浮動(dòng)，下面的文字流將環(huán)繞在它左邊：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
img
{
float:right;
}
</style>
</head>
<body>
<p>在下面的段落中，我們添加了一個(gè) <b>float:right</b> 的圖片。導(dǎo)致圖片將會(huì)浮動(dòng)在段落的右邊。</p>
<p>
<img src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="95" height="84" />
人生如夢(mèng)，亦哭亦歌，葉凋零，落葉隨水流。水冰涼，曲終人已散。漪沫溫婉，斂眸芬芳，輕拾一抹文字的清香，在時(shí)光的水墨里，聽一段心靈，擷一段清澈;在心與心的重逢，心與心的微笑，闊一別紅塵紛擾，素年錦時(shí)，這何嘗不是一種最美的守候。人生在世，為求知己。吾無知己，甚感孤獨(dú)。 為求知己，吾已踏千山，走萬水。 惜無人知吾，無人解吾。 甚難受，乃，莫過于父母同不知吾心。 何人能知吾，吾心孤獨(dú)。 知己?何君是也?
</p>
</body>
</html>運(yùn)行程式嘗試
彼此相鄰的浮動(dòng)元素
如果你把幾個(gè)浮動(dòng)的元素放在一起，如果有空間的話，它們將彼此相鄰。
在這裡，我們對(duì)圖片廊道使用float 屬性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
</style>
</head>
<body>
<h3>圖片庫</h3>
<p>試著調(diào)整窗口,看看當(dāng)圖片沒有足夠的空間會(huì)發(fā)生什么。</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>運(yùn)行程式嘗試
清除浮動(dòng)- 使用clear
元素浮動(dòng)之後，周圍的元素會(huì)重新排列，為了避免這種情況，使用clear 屬性。
clear 屬性指定元素兩側(cè)不能出現(xiàn)浮動(dòng)元素。
使用clear 屬性在文字中新增圖片廊：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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>試著調(diào)整窗口,看看當(dāng)圖片沒有足夠的空間會(huì)發(fā)生什么。.</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>執(zhí)行程式嘗試一下
##更多實(shí)例
讓段落的第一個(gè)字母浮動(dòng)到左邊 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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>
誰曾說過，有故事的人注定會(huì)相遇，不管是以哪種方式。 對(duì)有感情不愿虧欠誰，卻還是欠著一些?；蛟S等到?jīng)]了信心時(shí)，等到?jīng)]有希望的時(shí)候，會(huì)悄然撤離.人人都有過等待與被等待的時(shí)候。離開永遠(yuǎn)比相遇更容易，因?yàn)橄嘤鍪菐變|人中一次的緣分，而離開只是兩個(gè)人的結(jié)局。
</p>
</body>
</html>執(zhí)行程式嘗試實(shí)例
使用 float 建立一個(gè)網(wǎng)頁頁首、頁尾、左邊的內(nèi)容和主要內(nèi)容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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>執(zhí)行程式嘗試一下
CSS 中所有的浮動(dòng)屬性
"CSS" 列中的數(shù)字表示不同的CSS 版本（CSS1 或CSS2）定義了該屬性。
| 屬性 | 描述 | 值 | CSS |
|---|---|---|---|
| 指定不允許元素周圍有浮動(dòng)元素。 | left |
? ? ? ? ? ?right # ? ? ? ? ? ?both # ? ? ? ? ? ?none | ? ? ? ? ? ?inherit |
| #float | #指定一個(gè)盒子（元素）是否可以浮動(dòng)。 left ? ? ? ? ? ?right | ? ? ? ? ? ?none |
1
