CSS之float属性解读
在web标准的网页中，页面各个元素都是以标准流的方式来进行布局的。即块元素占满指定的宽度，不指定宽度则占满整行（如<p>、<div>元素），内联元素则是在行内一个接一个的从左到右排列（如<a>、<span>元素）。这种默认的布局方式使用起来简单，但也带来很大的局限，只能从上到下显示内容，无法实现图文环绕混排的效果；无法实现两列或者多列的布局，不能很好的利用页面空间。其实要实现上述的复杂效果，我们可以借助CSS提供的float属性。
标准流代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>标准流文档</title>
<style type="text/css">
#header,#footer{height:50px;background:#ccc;}
#content{height:300px;background:#399;}
</style>
</head>
<body>
<h3>块状元素示例</h3>
<div id="header">页头</div>
<div id="content">内容</div>
<div id="footer">页脚</div>
<h3>内联元素示例</h3>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.ifeng.com">凤凰网</a>
<a href="http://www.cnblogs.com">博客园</a>
</body>
</html>
示例图
float属性的含义：
元素使用了float属性后，可以使该元素脱离标准流本身，浮动在其他元素之上，使其不再占用原本属于该元素的空间，这样会导致后面的元素上移并占用原本属于该元素的空间。
对内容块和A标签使用浮动属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>浮动元素示例子</title>
<style type="text/css">
#header,#footer{height:50px;background:#ccc;}
#content{background:#399;}
#content{float:left;}
a{float:left;width:100px;}
</style>
</head> <body>
<h3>块状元素浮动示例</h3>
<div id="header">页头</div>
<div id="content">内容</div>
<div id="footer">页脚</div>
<h3>内联元素浮动示例</h3>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.ifeng.com">凤凰网</a>
<a href="http://www.cnblogs.com">博客园</a>
</body>
</html>
效果图如下
全面理解和掌握float：
1. float属性仅对使用该属性的元素本身以及后面的元素产生影响（后面元素会上移-->页脚块上移）。
2. 内联元素使用了float属性后就会变成块级元素，就可以设置元素的高度和宽度(参考A标签)。
3. float属性一般配合后面标签的clear属性共同使用，以便清除float属性带来的对后面元素的影响。
4、使用float属性的元素，如果未设置元素宽度，则元素宽度自动调整为适应内容的宽度（参考内容DIV--内容块的大小未定义，则自动调整）。
范例解读一(用于布局)
此布局中，有页头+内容+页脚组成，内容中的三例都使用了float属性，设置为float:left ，而页脚块使用了clear属性，设置为clear:both;
范例解读二(图文混排)
要实现此布局，图片img标签可以使用了float属性，设置为float:left，而旁边的说明文字则使用p标签，为正常布局，则自动上浮到图片旁边，从而实现环绕图片的效果，而下面的发表说明可以同样使用p标签，附加clear属性，设置clear：both或者clear：left都可以，这样的话发表说明就自动在图片之下。
CSS之float属性解读的更多相关文章
- (十一)学习CSS之float属性
参考:http://www.w3school.com.cn/cssref/pr_class_float.asp 定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕 ...
- CSS中float属性和clear属性的一些笔记
在学习CSS的最后一部分内容中,float属性和clear属性比较难以用语言描述,因此在笔记本中无法准确的记录这两个属性的用法.所以在博客园上以图文的形式记录这两种属性的特征,以备以后查阅. 首先,定 ...
- 【CSS】float属性
float浮动属性1.作用: 将页面元素浮动起来,使其能够向左或者向右排列 2.应用: 实现页面中布局的左右排版 实现图文环绕的版式效果 3.值: 4.原理: 浮动元素将脱离默认的文档流,漂浮在默认文 ...
- CSS中float属性
这个东西叫浮动.顾名思义,就是让设置的标签产生浮动效果,就是脱离原来页面的标准输出流.正常情况下,HTML页面中块元素都是从上倒下排列的.如果想实现左右结构.float的一种选择(当然还有其他方法). ...
- JS操作css的float属性的特殊写法
使用js操作css属性的写法是有一定的规律的: 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin,obj.style.width,obj.sty ...
- CSS 浮动 float 属性
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 请看下图,当把框 1 向右浮动时,它 ...
- CSS之 float 属性
特性: float的设计初衷仅仅是文字环绕效果 浮动具有破坏性,会使父容器高度塌陷 清除浮动方法: 1.脚底插入cleart:both 2.父元素BFC(IE8+)/haslayout(IE6/7 ...
- CSS——float属性备忘笔记
通过指定CSS属性float的值,从而使元素向左或向右浮动,然后由后继元素向上移动以填补前面元素的浮动而空出的可用空间.CSS的float属性,作用就是改变块元素对象的默认显示方式,HTML标签设置了 ...
- CSS 布局Float 【0】
float是 css 样式的定位属性.我们在印刷排版中,文本可以按照需要围绕图片.一般把这种方式称为“文本环绕”.在网页设计中,应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图 ...
随机推荐
- 点菜系统 pickview的简单实用
使用pickview的时候多想想tableview的使用,观察两者的相同之处 pickview的主要用途用于选择地区 生日年月日 和点餐 示例代码 简单的pickview点餐系统// ViewC ...
- sqlserver 三种恢复模式
sql server数据库提供了三种恢复模式:完整,简单和大容量日志,这些模式决定了sql server如何使用事务日志,如何选择它要记录的操作,以及是否截断日志.截断事务日志是删除己执行事务并把该日 ...
- 【Tomcat】java.lang.OutOfMemoryError
1.Java heap space Heap size 昨天在服务器上面部署项目,之前服务器上面已经有一个项目的了. 然后我再部署一个,上去跑了之后,居然内存溢出了. 好吧,内存溢出就调一下,调了之后 ...
- C语言，调试必备的DEBUG宏定义
1. #include <stdio.h> #include <stdarg.h> //仅仅是打印函数名字替换 DEBUG <--> printf #define ...
- HttpResponseRedirect VS HttpResponse
当我们处理了post提交的数据之后,我们使用HttpResponseRedirect跳转到另一个页面,而不是用HttpResponse. 例如当一个投票环节时使用HttpResponse可以使用浏览器 ...
- 那些年搞不懂的"协变"和"逆变"
博主之前也不是很清楚协变与逆变,今天在书上看到了有关于协变还是逆变的介绍感觉还是不太懂,后来看了一篇园子里面一位朋友的文章,顿时茅塞顿开.本文里面会有自己的一些见解也会引用博友的一些正文,希望通过本篇 ...
- 限制QLineEdit的数值输入范围（一共4种限制器：QDoubleValidator, QIntValidator, QRegExpValidator, 和QRegularExpressionValidator）
在使用QLineEdit输入数值时,经常遇到限制其范围的需要,比如角太阳高度角范围为[-90,90],经度值范围[-180,180],方位角范围[0,360].Qt提供了QIntValidator和Q ...
- Python 2.7 学习笔记 内置语句、函数、标准库
使用任何开发语言进行软件开发,都离不开语言提供的内置库(或Api),甚至说内置库的强大及使用是否方便都会影响大家对开发语言的选择. python语言,一样提供了很多内置的功能,可供开发时使用.主要有如 ...
- zk create() 方法
create() $path = $zkh->create($req_path, $data); $path = $zkh->create($req_path, $data, 'flags ...
- Net::OpenSSH 使用例子
[root@dr-mysql01 mojo]# cat a1.pl use Net::OpenSSH; my $host = '121.4xx.xx1.41'; my $user = 'root'; ...