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都可以,这样的话发表说明就自动在图片之下。
最新文章
- 统计分析中Type I Error与Type II Error的区别
- Spring MVC中Action使用总结
- jQuery刷新包含的<;jsp:include>;页面
- EXT 环境部署
- 挂载NFS
- PHP的学习--连接MySQL的三种方式
- 关于int,long,long long
- Busybox下mdev配置说明
- Visual Studio Online Integrations
- Response.Expires 属性 (转载于疯狂客的BLOG)
- Android 类似未读短信图标显示数字效果的分析
- Cppcheck 1.54 C/C++静态代码分析工具
- 谈论Hibernate级联删除——JPA根据Hibernate实现许多级联删除CascadeType.DELETE_ORPHAN
- 【百度地图API】北京周边7日游——图标按路线轨迹行动
- js Date 日期格式化(转)
- ajax上传图片的本质
- Explicit Constructors(显式构造函数)
- WinForm中预览Office文件
- python第三十九课——面向对象(二)之初始化属性
- MySQL 5.6学习笔记(数据表基本操作)
热门文章
- JavaScript语言基础知识6
- UIApplication相关
- ARM异常---一个DataAbort的触发过程:
- onekey_fourLED
- 基于visual Studio2013解决C语言竞赛题之0524职工年龄
- 【Dior风格/舒适防风面料/抗静电里衬/大身撞色拼接/精致平驳领/时尚便西款/蓝绿色】玛萨玛索男装网购商城
- POJ 3261 Milk Patterns(后缀数组+二分答案+离散化)
- Dockerfile指令总结
- JRE 和 JDK 的区别是什么?
- java操作Excel处理数字类型的精度损失问题验证