CSS Float(浮動)
CSS?Float(浮動)
#什麼是 CSS Float（浮動）？
CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。
Float（浮動），往往是用於圖像，但它在佈局時一樣非常有用。
元素怎麼浮動
元素的水平方向浮動，表示元素只能左右移動而無法上下移動。
一個浮動元素會盡量向左或向右移動，直到它的外緣碰到包含框或另一個浮動框的邊框為止。
浮動元素之後的元素將圍繞它。
浮動元素之前的元素將不會受到影響。
如果圖像是右浮動，下面的文字流將環(huán)繞在它左邊：
<!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>試著調整窗口,看看當圖片沒有足夠的空間會發(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>運行程式嘗試
清除浮動- 使用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>試著調整窗口,看看當圖片沒有足夠的空間會發(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í)行程式嘗試一下
##更多實例
讓段落的第一個字母浮動到左邊 <!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>執(zhí)行程式嘗試實例
使用 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>執(zhí)行程式嘗試一下
CSS 中所有的浮動屬性
"CSS" 列中的數字表示不同的CSS 版本（CSS1 或CSS2）定義了該屬性。
| 屬性 | 描述 | 值 | CSS |
|---|---|---|---|
| 指定不允許元素周圍有浮動元素。 | left |
? ? ? ? ? ?right # ? ? ? ? ? ?both # ? ? ? ? ? ?none | ? ? ? ? ? ?inherit |
| #float | #指定一個盒子（元素）是否可以浮動。 left ? ? ? ? ? ?right | ? ? ? ? ? ?none |
1
