CSS float 属性
让图像向右侧浮动:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
img {
float: right;
}
</style>
</head>
<body>
<p>在下面的段落中,我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
<p>
<img src="/examples/logocss.gif" width="95" height="84" /> 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。
</p>
</body>
</html>
属性定义及使用说明
float属性指定一个盒子(元素)是否应该浮动。
注意: 绝对定位的元素忽略float属性!
默认值: | none |
---|---|
继承: | no |
版本: | CSS1 |
JavaScript 语法: | object.style.cssFloat="left" |
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
属性 | |||||
---|---|---|---|---|---|
float | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
属性值
值 | 描述 |
---|---|
left | 元素向左浮动。 |
right | 元素向右浮动。 |
none | 默认值。元素不浮动,并会显示在其在文本中出现的位置。 |
inherit | 规定应该从父元素继承 float 属性的值。 |
更多实例
段落的首字母浮动于左侧 - 使段落的首字母浮动于左侧,并向这个字母添加样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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>
创建一个水平菜单 - 使用浮动来创建水平菜单的超链接列表。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul {
float: left;
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}
a {
float: left;
width: 6em;
text-decoration: none;
color: white;
background-color: purple;
padding: 0.2em 0.6em;
border-right: 1px solid white;
}
a:hover {
background-color: #ff3300;
}
li {
display: inline;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
<p>
上面的示例中,我们让ul元素和元素浮动。 li元素将显示为内联元素(没有换行符的元素之前或之后)。这迫使列表为一行。 ul元素的宽度的100%,每一个超链接列表的宽度6 em(当前字体大小的6倍)。 我们添加一些颜色和边界使其更高档。
</p>
</body>
</html>
创建无表格的首页 - 使用浮动来创建拥有页眉、页脚、左侧目录和主体内容的首页。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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">mifengjc.com</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 mifengjc you will find all the Web-building tutorials you need, from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
<p>mifengjc - 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 Float