国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Manual Dalam Talian CSS / CSS Float(浮動)

CSS Float(浮動)

CSS Float(浮動)

什么是 CSS  Float（浮動）？

CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。

Float（浮動），往往是用于圖像，但它在布局時一樣非常有用。





元素怎樣浮動

元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。

一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

浮動元素之后的元素將圍繞它。

浮動元素之前的元素將不會受到影響。

如果圖像是右浮動，下面的文本流將環(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>在下面的段落中，我們添加了一個 <b>float:right</b> 的圖片。導(dǎo)致圖片將會浮動在段落的右邊。</p>
<p>
<img src="http://img.php.cn/upload/article/000/000/015/5c67de683f83a569.gif" width="95" height="84" />
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
</p>
</body>

</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

彼此相鄰的浮動元素

如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。

在這里，我們對圖片廊使用 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)整窗口,看看當圖片沒有足夠的空間會發(fā)生什么。</p>
<img class="thumbnail" src="http://img.php.cn/upload/image/763/334/787/1550110943501028.jpg" width="107" height="90">
<img class="thumbnail" src="http://img.php.cn/upload/image/489/548/993/1550111001184350.jpg" width="107" height="80">
<img class="thumbnail" src="http://img.php.cn/upload/image/147/145/761/1550111019321651.jpg" width="116" height="90">
<img class="thumbnail" src="http://img.php.cn/upload/image/769/142/904/1550111039657921.jpg" width="120" height="90">
<img class="thumbnail" src="http://img.php.cn/upload/image/763/334/787/1550110943501028.jpg" width="107" height="90">
<img class="thumbnail" src="http://img.php.cn/upload/image/489/548/993/1550111001184350.jpg" width="107" height="80">
<img class="thumbnail" src="http://img.php.cn/upload/image/147/145/761/1550111019321651.jpg" width="116" height="90">
<img class="thumbnail" src="http://img.php.cn/upload/image/769/142/904/1550111039657921.jpg" width="120" height="90">
</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

清除浮動 - 使用 clear

元素浮動之后，周圍的元素會重新排列，為了避免這種情況，使用 clear 屬性。

clear 屬性指定元素兩側(cè)不能出現(xiàn)浮動元素。

使用 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)整窗口,看看當圖片沒有足夠的空間會發(fā)生什么。.</p>
<img class="thumbnail" src="http://img.php.cn/upload/image/763/334/787/1550110943501028.jpg" width="107" height="90">

<img class="thumbnail" src="http://img.php.cn/upload/image/489/548/993/1550111001184350.jpg" width="107" height="80">

<img class="thumbnail" src="http://img.php.cn/upload/image/147/145/761/1550111019321651.jpg" width="116" height="90">

<img class="thumbnail" src="http://img.php.cn/upload/image/769/142/904/1550111039657921.jpg" width="120" height="90">
<h3 class="text_line">第二行</h3>
<img class="thumbnail" src="http://img.php.cn/upload/image/763/334/787/1550110943501028.jpg" width="107" height="90">
<img class="thumbnail" src="http://img.php.cn/upload/image/489/548/993/1550111001184350.jpg" width="107" height="80">
<img class="thumbnail" src="http://img.php.cn/upload/image/147/145/761/1550111019321651.jpg" width="116" height="90">
<img class="thumbnail" src="http://img.php.cn/upload/image/769/142/904/1550111039657921.jpg" width="120" height="90">
</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

更多實例

為圖像添加邊框和邊距并浮動到段落的左側(cè)

讓我們?yōu)閳D像添加邊框和邊距并浮動到段落的左側(cè)：

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style>
img 
{
	float:right;
	border:1px dotted black;
	margin:0px 0px 15px 20px;
}
</style>
</head>

<body>
<p>
	在下面的段落中,圖像將向右浮動。黑色虛線邊界添加到圖像。
我們還添加了邊緣的0 px的頂部和右側(cè) margin,15 px底部margin,和20 px左側(cè)的margin的圖像。使得文本遠離圖片:</p>
<p>
<img src="http://img.php.cn/upload/article/000/000/015/5c67de683f83a569.gif" width="95" height="84" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>

</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

標題和圖片向右側(cè)浮動

讓標題和圖片向右側(cè)浮動。

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style>
div
{
	float:right;
	width:120px;
	margin:0 0 15px 20px;
	padding:15px;
	border:1px solid black;
	text-align:center;
}
</style>
</head>

<body>
<div>
<img src="http://img.php.cn/upload/article/000/000/015/5c67de683f83a569.gif" width="95" height="84" /><br>
CSS is fun!
</div>
<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

<p>
	在上面的段落中,div元素是120像素寬,它包含了圖像。
	div元素會向右浮動。
	Margins 被添加到div使得文本遠離div。
	Borders和padding被添加到div框架的圖片和標題中
</p>
</body>

</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

讓段落的第一個字母浮動到左側(cè)

改變樣式，讓段落的第一個字母浮動到左側(cè)

實例

<!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>是一些文本。
這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
</p>

<p>
在上面的段落中, 第一個字嵌入在span 元素中。
這個 span 元素的寬度是當前字體大小的1.2倍。
這個 span 元素是當前字體的400%(相當大)， line-height 為80%。
文字的字體為"Algerian"。
</p>

</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

創(chuàng)建一個沒有表格的網(wǎng)頁

使用 float 創(chuàng)建一個網(wǎng)頁頁眉、頁腳、左邊的內(nèi)容和主要內(nèi)容。

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title>
<style>
* {
    box-sizing: border-box;
}
body {
    margin: 0;
}
.header {
    background-color: #2196F3;
    color: white;
    text-align: center;
    padding: 15px;
}
.footer {
    background-color: #444;
    color: white;
    padding: 15px;
}
.topmenu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #777;
}
.topmenu li {
    float: left;
}
.topmenu li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}
.topmenu li a:hover {
    background-color: #222;
}
.topmenu li a.active {
    color: white;
    background-color: #4CAF50;
}
.column {
    float: left;
    padding: 15px;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.sidemenu {
    width: 25%;
}
.content {
    width: 75%;
}
.sidemenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.sidemenu li a {
    margin-bottom: 4px;
    display: block;
    padding: 8px;
    background-color: #eee;
    text-decoration: none;
    color: #666;
}
.sidemenu li a:hover {
    background-color: #555;
    color: white;
}
.sidemenu li a.active {
    background-color: #008CBA;
    color: white;
}
</style>
</head>
<body>

<ul class="topmenu">
  <li><a href="#home" class="active">主頁</a></li>
  <li><a href="#news">新聞</a></li>
  <li><a href="#contact">聯(lián)系我們</a></li>
  <li><a href="#about">關(guān)于我們</a></li>
</ul>

<div class="clearfix">
  <div class="column sidemenu">
    <ul>
      <li><a href="#flight">The Flight</a></li>
      <li><a href="#city" class="active">The City</a></li>
      <li><a href="#island">The Island</a></li>
      <li><a href="#food">The Food</a></li>
      <li><a href="#people">The People</a></li>
      <li><a href="#history">The History</a></li>
      <li><a href="#oceans">The Oceans</a></li>
    </ul>
  </div>

  <div class="column content">
    <div class="header">
      <h1>The City</h1>
    </div>
    <h1>Chania</h1>
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
    <p>You will learn more about responsive web pages in a later chapter.</p>
  </div>
</div>

<div class="footer">
  <p>底部文本</p>
</div>

</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

CSS 中所有的浮動屬性

"CSS" 列中的數(shù)字表示不同的 CSS 版本（CSS1 或 CSS2）定義了該屬性。

屬性描述值CSS
clear指定不允許元素周圍有浮動元素。left
right
both
none
inherit		1
float指定一個盒子（元素）是否可以浮動。left
right
none
inherit		1