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属性的页面元素就像在印刷布局里面的被文字包围的图 ...
随机推荐
- DataGridView的Validating事件注册后删除操作的处理
我们在处理DataGridView必填项判断时,一般使用DataGridView的RowValidating事件判断,具体代码如下: protected override void OnRowVali ...
- 【Eclipse】报错提示删掉@Override
是因为项目的JRE System Library版本不对,点击Edit进入Edit Library 界面,因为项目默认是使用Eclipse自带的jdk版本(Workspace default JRE) ...
- Xcode7网络限制
在info.plist添加字段 App Transport Security Settings Allow Arbitrary Loads yes
- [HDU 1973]--Prime Path(BFS,素数表)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1973 Prime Path Time Limit: 5000/1000 MS (Java/Others ...
- python读写xml
来自http://blog.csdn.net/liuyuehui110/article/details/7287897 备份防止链接失效 一.XML的读取. 在 NewEdit 中有代码片段的功能,代 ...
- Codeforces 509C Sums of Digits 贪心
这道题目有人用DFS.有人用DP 我觉得还是最简单的贪心解决也是不错的选择. Ok,不废话了,这道题目的意思就是 原先存在一个严格递增的Arrary_A,然后Array_A[i] 的每位之和为Arra ...
- Codeforces 479D - Long Jumps
479D - Long Jumps, 480B - Long Jumps It , or . If we can already measure both x and y, output . Then ...
- 一个开源Delphi分类组件推荐网页
https://github.com/Fr0sT-Brutal/awesome-delphi
- Qt 操作 pdf 文件
写了好久的东西,不小心按了下返回键就没了.CSDN居然没自动保存,坑爹啊 原本还有很多信息的,现在直入正题吧. QT没有内置PDF操作的功能(其实有一个,QPrinter,不过只能写不能读,基本是半残 ...
- 执行Git命令时出现 SSL certificate problem 的解决办法
比如我在windows下用git clone gitURL 就提示 SSL certificate problem: self signed certificate 这种问题,在windows下出现 ...