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属性的页面元素就像在印刷布局里面的被文字包围的图 ...
随机推荐
- Robot Framework学习路线
0. 官方网站 http://robotframework.org/ 所有资料都来自这里,从这里找到必要的链接,从而深入其中的细节. 1. Quick Start Guide https://co ...
- Threejs 官网 - Three.js 的图形用户界面工具（GUI Tools with Three.js）
Threejs 官网 - Three.js 的图形用户界面工具(GUI Tools with Three.js) 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) ...
- win8系统特别慢的基本判断方法
单位有6,7台同事的电脑是win8.1.不知道什么原因,两位领导反映电脑特别慢. 我查看了一下,确实很慢. 虽然知道win8系统不好,但也不至于这样. 打开任务管理器,看了一下cpu和内存的使用状态, ...
- linux 修改IP， DNS 命令
linux 修改IP, DNS 命令 http://www.cnblogs.com/fighter/archive/2010/03/04/1678007.html 修改DNS [root@localh ...
- ARM异常---一个DataAbort的触发过程：
一个DataAbort异常的触发过程://////////////////////////////xxxx.inc_STACK_BASEADDRESS EQU 0x33ff8000_MMUTT_STA ...
- js模态窗口
最近在看js,正好公司用的框架中用到了模态窗口,以前没有接触过,现在把模态窗口的用法先记下来. 常用的浏览器chrome,Firefox,ie11,这三种分别支持document.open(),win ...
- Easyui中tree组件实现搜索定位功能及展开节点定位
这几天遇到个input + tree 实现搜索功能的需求,在这里贴出来供大家参考下,如果你有更好的实现效果希望不腻赐教! 首先给大家看看效果 小二 上图 : 需要的部件知识: easyui ...
- HDU 3923 Invoker 【裸Polya 定理】
参考了http://blog.csdn.net/ACM_cxlove?viewmode=contents by---cxlove 的模板 对于每一种染色,都有一个等价群,例如旋转, ...
- 一个RPC的demo
从下面的例子中可以看到,Consumer(client)的代码中引用了Provider部分的class,本例中是 com.provider.EchoServiceImpl和com.provider.E ...
- 基于visual Studio2013解决C语言竞赛题之0417四倍数
题目 解决代码及点评 这道题目还是考察循环,通过循环遍历1234~9876,然后将每个数都用算法判断其是否符合条件#include <stdio.h> #include ...