Float定义：

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。

浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

注释：

假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

简单实例：

创建水平菜单：

代码：

<html>

<head>

<style type="text/css">

ul

{

float:left;

width:100%;

padding:0;

margin:0;

list-style-type:none;

}

a

{

float:left;

width:7em;

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 元素和 a 元素浮向左浮动。li 元素显示为行内元素（元素前后没有换行）。这样就可以使列表排列成一行。ul 元素的宽度是 100%，列表中的每个超链接的宽度是 7em（当前字体尺寸的 7 倍）。我们添加了颜色和边框，以使其更漂亮。

</p>

</body>

</html>

创建无表格的首页：

代码：

<html>

<head>

<style type="text/css">

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">W3School.com.cn</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 W3School.com.cn you will find all the Web-building tutorials you need,

from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>

<p>W3School.com.cn - The Largest Web Developers Site On The Net!</p></div>

<div class="footer">Copyright 2008 by YingKe Investment.</div>

</div>

</body>

</html>

CSS float 属性的更多相关文章

  1. 详解CSS float属性（转）

    详解CSS float属性   阅读目录 基础知识 float的详细细节 float特殊情况 clear属性 清除浮动 float的应用 总结 CSS中的float属性是一个频繁用到的属性,对于初学者 ...

  2. 关于css float 属性以及position:absolute 的区别。

    1.float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.div一个典型的块 ...

  3. CSS——float属性备忘笔记

    通过指定CSS属性float的值,从而使元素向左或向右浮动,然后由后继元素向上移动以填补前面元素的浮动而空出的可用空间.CSS的float属性,作用就是改变块元素对象的默认显示方式,HTML标签设置了 ...

  4. 详细分析css float 属性以及position:absolute 的区别

    1.float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.div一个典型的块 ...

  5. 详解CSS float属性

    CSS中的float属性是一个频繁用到的属性,对于初学者来说,如果没有理解好浮动的意义和表现出来的特性,在使用的使用很容易陷入困惑,云里雾里,搞不清楚状态.本文将从最基本的知识开始说起,谈谈关于浮动的 ...

  6. css float属性详解

    定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.如果浮动非 ...

  7. CSS float属性

    表示向左浮动,比如多个div在一个页面上,默认情况是:一行一个div,但是只要在div的css中使用float:left,可以使一行有多个div,这样可以把网页划分成很多块,但是使用该属性会影响后面的 ...

  8. JS控制css float属性的用法经验总结

    JavaScript与CSS属性的控制网上很常见,因此来说用js操作css属性是有一定规律的. 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin ...

  9. CSS float和position属性

    1. 浮动 CSS float属性定义了元素在水平方向的浮动.该元素从网页的正常流动(文档流)中移除,对于浮动元素后的块级元素,块级元素将会被浮动元素覆盖,并且会接着其上一个文档流中的元素,按文档流的 ...

随机推荐

  1. Android后门GhostCtrl，完美控制设备任意权限并窃取用户数据

    Android系统似乎已经成为世界各地病毒作者的首选目标,每天都有新的恶意软件在感染更多的设备. 这一次,安全公司趋势科技发布警告,他们发现了一个新的Android后门--GhostCtrl Ghos ...

  2. blob 和 sas

    Blob是什么? 请看上篇文章简单总结下关于blob的图片上传 在使用Blob图片上传的时候碰到许多问题,比如如何使用用户名密码下载文件啊什么的 今天就记录一下我碰到的最大的问题 如何匿名去访问你上传 ...

  3. MySQL 启动参数说明及性能优化建议

    [mysqld] port = 3306 serverid = 1 socket = /tmp/mysql.sock skip-name-resolve #禁止MySQL对外部连接进行DNS解析,使用 ...

  4. 函数响应式编程及ReactiveObjC学习笔记 (-)

    最近无意间看到一个视频讲的ReactiveObjC, 觉得挺好用的 但听完后只是了解个大概. 在网上找了些文章, 有的写的比较易懂但看完还是没觉得自己能比较好的使用RAC, 有的甚至让我看不下去 这两 ...

  5. win10 设置默认输入法为英文，ctrl +shift切换中文

    控制面板-更改输入法,这个界面出现的是电脑现在安装的语言,每个语言中可能有多个输入法,比如我的有微软的和qq的,谁在上谁就是系统的默认语言(本人当然是中文在上),英文中有美式键盘. 如果想要电脑启动的 ...

  6. java基础系列--集合类库（一）

    原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/7229478.html 1.概述 Java的集合类库很是丰富,囊括了大部分的常见数据结构形式 ...

  7. tomcat内存溢出之PermGen space

    线上一台web服务器不能正常访问了,检查了一下,tomcat进程还在,就是web不能正常访问,重启一下tomcat恢复正常,查询日志,发现提示内存溢出,如下图: java.lang.OutOfMemo ...

  8. HDU 6047 Maximum Sequence(线段树)

    题目网址:http://acm.hdu.edu.cn/showproblem.php?pid=6047 题目: Maximum Sequence Time Limit: 4000/2000 MS (J ...

  9. zTree新增的根结点再新增子节点reAsyncChildNodes不生效解决方案

    zTree新增的根结点再新增子节点reAsyncChildNodes不生效解决方案, zTree新的根结点不能异步刷新,reAsyncChildNodes不生效解决方案, reAsyncChildNo ...

  10. AtCoder Beginner Contest 068

    A - ABCxxx 题意: 给出n,输出“ABCn”就可以了,纯水题. B - Break Number 题意: 给出n,找出从1到n的闭区间内能够被2整除最多次的数. 思路: 直接模拟. 代码: ...