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属性的页面元素就像在印刷布局里面的被文字包围的图 ...
随机推荐
- MSSQLServer的备份与还原
最近用到了mssql2000的数据备份还原到2008上, 在备份2000时,一定注意要备份成一个文件,就是目标那里只添加一个就好,(否则待会还原数据库时要添加这两个文件,要不就报“备份了几个簇,只提供 ...
- asp.net中MVC多语言包的使用
Global.asax.cs文件 protected void Application_AcquireRequestState(object sender, EventArgs e) { if (Ht ...
- ThinkPHP - 模板引擎
1.导入css/js文件 - CSS文件 <!--<link rel="stylesheet" type="text/css" href=" ...
- Android：WebView(慕课网)
使用webview最重要的三点: 1 WebView加载本地资源(webView.loadUrl("file:///android_asset/example.html");) 2 ...
- mysql版sql助记
新建用户 CREATE USER 'username'@'host' IDENTIFIED BY 'password'; [host 中 使用 % 为通配符, 匹配任意远程主机] 赋权 GRANT p ...
- postgresql 忘记 postgres 密码
参考博文: 如何重置postgresql用户密码 解决方法: 1.关闭数据库服务 2.进入数据库的工作空间目录 (如果是建库是没有另外指定,应该就是postgresql安装目录下的 data 目录) ...
- 使用Qt设计师文件的3种方式
使用Qt设计师设计的.ui界面文件是XML文件,有3种方式在PyQt中使用,本文将通过实例进行讲解. 使用PyQt中如何结合Qt设计师进行开发中的例子.点击按钮修改标签的内容. 1. 直接使用ui文件 ...
- AWVS介绍(转)
使用AWVS对域名进行全局分析,深入探索: 首先,介绍一下AWVS这个工具. Acunetix Web Vulnerability Scanner(简称AWVS)是一款知名的网络漏洞扫描工具,它通过网 ...
- 具体解释EBS接口开发之WIP模块接口
整体说明 文档目的 本文档针对WIP模块业务功能和接口进行分析和研究,对採用并发请求方式和调用API方式分别进行介绍 内容 WIP模块经常使用标准表简单介绍 WIP事物处理组成 WIP相关业务流程 W ...
- SGU 415. Necessary Coins ( 背包dp )
题意大概是:给出N个硬币, 面值为a_i, 问要凑成X元哪些硬币是不可或缺的.1 ≤ N ≤ 200, 1 ≤ x ≤ 10^4 直接枚举, 然后就是01背包了. 为了不让复杂度多乘个N, 我们就从左 ...