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属性的页面元素就像在印刷布局里面的被文字包围的图 ...
随机推荐
- iOS 之使用CAShapeLayer中的CAGradientLayer实现圆环的颜色渐变
本文转载自:http://blog.csdn.net/zhoutao198712/article/details/20864143 在 Github上看到一些进度条的功能,都是通过Core Graph ...
- 怎样用Eclipse正确导入开源库AndroidStaggeredGrid
今天带给大家的是怎样正确导入开源库AndroidStaggeredGrid的代码,大家在使用github上的开源控件时,多多少少都遇到过像AndroidStaggeredGrid这样的project结 ...
- ajax 基础实例
优点:使用ajax读取数据文件,不需要刷新页面就能取出文件数据 目 录 1.0 基于ajax请求的理论支持 1.1 js 实现jquray中 ajax请求功能 基于ajax请求的理论支持 < ...
- 转： AlphaImageLoader简介
Microsoft.AlphaImageLoader是IE滤镜的一种,其主要作用就是对图片进行透明处理.虽然FireFox和IE7以上的IE浏览器已经支持透明的PNG图片,但是就IE5-IE6而言还是 ...
- 自定义安装Apache+php+mysql网站服务器环境
自定义安装Apache+php+mysql 这种方式是比较麻烦的安装方式,需要具有一定的对Apache了解的基础上才能安装,安装顺序就是先安装Apache软件,然后安装php,最后安装mysql.这里 ...
- UVA 10905 Children's Game 孩子的游戏 贪心
题意:给出N个数,要求把它们拼凑起来,让得到的数值是最大的. 只要分别比较两个数放前与放后的值的大小,排序后输出就可以了. 比如123和56,就比较12356和56123的大小就行了. 写一个比较函数 ...
- MongoDB 操作手冊CRUD查询指针
枚举遍历指针 概述 前面已经讲过,db.collection.find()假设没有指定给一个var声明的变量.将自己主动枚举前20条记录. 手动枚举指针 在mongo控制台中.将查询赋给一个var声明 ...
- java高级project师须要掌握的技术
1.你须要精通面向对象分析与设计(OOA/OOD).涉及模式(GOF,J2EEDP)以及综合模式.你应该十分了解UML,尤其是class,object,interaction以及statediagra ...
- android的animator
3.0 以前,android支持两种动画模式,tween animation,frame animation,在android3.0中又引入了一个新的动画系统:property animation,这 ...
- ACM比赛（第二次A）
ime Limit:1000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Description There is ...