- 浏览: 1595794 次
- 性别:
文章分类
- 全部博客 (2929)
- 非技术 (18)
- Eclipse (11)
- JAVA (31)
- 正则表达式 (0)
- J2EE (4)
- DOS命令 (2)
- WEB前端 (52)
- JavaScript (69)
- 数据库 (8)
- 设计模式 (0)
- JFreechart (1)
- 操作系统 (1)
- 互联网 (10)
- EasyMock (1)
- jQuery (5)
- Struts2 (12)
- Spring (24)
- 浏览器 (16)
- OGNL (1)
- WebService (12)
- OSGi (14)
- 软件 (10)
- Tomcat (2)
- Ext (3)
- SiteMesh (2)
- 开源软件 (2)
- Hibernate (2)
- Quartz (6)
- iBatis (2)
最新评论
float是什么?
float是CSS控制中的定位属性。我们经常在传统印刷产品中看到图片被文本围绕,这种方式一般被称为“文本环绕”。在网页设计中,应用了CSS的 float属性的页面元素就像在印刷布局里面的被文字包围的图片一样。浮动的元素仍然是网页流的一部分。这与使用绝对定位的页面元素相比是一个明显的不 同。绝对定位的页面元素被从网页流里面移除了,就像印刷布局里面的文本框被设置为无视页面环绕一样。绝对定位的元素不会 影响其它元素,其它元素也不会影响它,无论它是否和其它元素挨着。
举例说明,我们在sidebar这个元素中设置了浮动属性:
#sidebar { float: right; }
fload属性有四个可用的值:Left 和Right 分别浮动元素到各自的方向,None (默认的) 使元素不浮动,Inherit 将会从父级元素获取float值。
Float的用处
除了简单的在图片周围包围文字,我们在设计如下格式的布局时,就必须用到float属性。
Float对box元素内部的布局同样有用。例如下图这个小型图文并排布局,如果我们在左侧图片上使用Float,当图片大小发生变化的时候,box里面 的文字内容也将自动调整位置:
同样的布局如果我们在在外容器使用相对定位,然后在头像上使用绝对定位来实现,那么文本不会受头像图片大小的影响,不会随头像图片的大小而有相应变化。
清除Float
清除(clear)是浮动(float)的相关属性。我们在浮动元素与非浮动元素之间应该声明上面的浮动作用结束,这就需要用到clear。一个设置了清 除Float的元素不会如浮动所设置的一样,向上移动到Float元素的边界,而是会忽视浮动向下移动。如下,一图顶千言。
上例中,侧栏向右浮动,并且短于主内容区域。页脚(footer)于是按浮动所要求的向上跳到了可能的空间。要解决这个问题,可以在页脚(footer) 上清除浮动,以使页脚(footer)待在浮动元素的下面。
#footer { clear: both; }
清除(clear)也有4个可选值。最常用的是 both,同时清除左右两边的浮动。left 和 right 分别只能清楚一个方向的浮动。none 是默认值,只在需要移除已指定的清除值时用到。inherit 应该是第五个值,不过很奇怪的是IE 不支持。只清除左边或右边的浮动,实际中很少见,不过绝对有他们的用处。
伟大的塌陷
使用浮动(float)属性时我们需要注意的是带有float属性的元素是如何影响包含他们的父元素的。
注意:如果父元素只包含浮动元素,那么它的高度就会塌缩为零。如果父元素不包含任何的可见背景,这个问题会很难被注意到,但是这是一个很重要的问题。
塌陷的直观对立面更不好,如果我们为父元素指定了不合适的高度,就会出现下面的情况:
当上面的块级元素自动扩展以适应浮动元素时,段落间的文本流中会出现非自然的空白换行,而且没有有效的方法来修正这个问题。对于这种情况,设计师的抱怨会 更甚于对塌陷的抱怨。
为了防止怪异的布局和跨浏览器的问题,塌陷问题是必须要处理的。行之有效的办法就是我们在容器中的浮动元素之后,容器结束之前来清除浮动。
清除浮动的技术
如果你很明确的知道接下来的元素会是什么,可以使用 clear:both; 来清除浮动。这个方法很不错,它不需要 hack,不添加额外的元素也使得它有良好的语义性。当然事情并不是都可以这样解决的,我们还是需要准备各种不同的方法来实现清除浮动的目的。
空div方法
,从字面来看,是一个空的 div。
我们也可以尝试用一些其他元素,但是 div 是最常用的,因为它没有浏览器默认样式;没有特殊功能,而且一般不会被 css
样式化。这个方法因为只是为了起到清除浮动的作用,对页面没有上下文涵义而被纯语义论者嘲笑。诚然,从严格的角度来说他们是对的,但是这个确实有效又方
便,而且没有任何副作用。
overflow 方法 ,在父元素上设置 overflow 这个 css 属性。如果父元素的overflow 属性设置为 auto 或者 hidden,父元素就会自动扩展以包含浮动。这个方法有着较好的语义性,因为他不需要额外元素。但是,如果需要增加一个新的 div 来使用这个方法,其实就和空 div 方法一样没有语义了。而且要记住,overflow 属性不是为了清除浮动而存在的,它将有可能会引起副作用,要小心不要覆盖住内容或者触发了不需要的滚动条。
简单清除方法 ,这里使用了一个聪明的 css 伪选择符(:after)来清除浮动。比起在父元素上设置 overflow,只需要给它增加一个额外的类似于”clearfix”的类。这个类使用如下 css:
.clearfix:after {
content:" ";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
这会在清除浮动的父元素之后应用一点看不见的内容。这不是全部内容,还需要一些额外的代码来适应那些老旧的浏览器。
不同的情况需要不同的浮动清除方法。以一个具有不同样式块的网格为例。
为了从视觉上较好的把相似的块联系起来,需要在必要的地方换行,这里是颜色改变的地方。如果每个颜色组都有一个父元素的话,我们可以使用 overflow法 或者 简单清除方法。或者,在每组之间用一个空div方法 。如果额外的父元素并不存在,可以自己 试试来看看哪个方法好。
浮动的问题
浮动因脆弱而饱受诟病。大多数的脆弱性来自于 IE6 及其一系列的浮动相关 bug。虽然越来越多的设计师表示出对IE6的憎恶并且宣称不再为IE6单独设置CSS,但是IE6.0仍然被大多数普通上网用户使用,所以作为网页设计 师我们还是不得不无奈的重视这些臭虫,这里有些大概。
推倒是浮动元素内的元素(大多是图片)比浮动元素本身宽造成的现象。大多数的浏览器会在浮动之外渲染图片,但是不会有伸出来的部分影响其他布局。IE 会扩展浮动来包含图片,精彩大幅度地影响布局。一个普遍的例子是突破伸出主内容之外把侧栏推到下面。
快速修正:确保不是图片造成这种情况,使用 overflow:hidden 来切除多余的部分。
双倍边距bug
,处理 IE6
时,另一个需要记住的事情是,如果在和浮动方向相同的方向上设置外边距(margin),会引发双倍边距bug。
快速修正:给浮动设置 display:inline;
而且不用担心,它依然是块级元素。额外讲一下,一个没有赋予float属性的块级元素在设置了display:inline后,会变成内联元素,无法设置
自定义宽高。
3像素间距
,是指挨着浮动元素的文本会神奇的被踢出去3像素,好像浮动元素的周围有一个奇怪的力场
一样。
快速修正:在受影响的文本上设置宽度或高度。
底边距 bug
,IE7
中,当浮动父元素包含有浮动子元素时,这些子元素的底边距会被父元素忽略掉,造成子元素底边与父元素底边重合的丑陋情形。
快速修正:用父元素的底内补白(padding)代替。
综上所述,float是让人欢喜让人忧的这么一个属性,用好它,是我们必须要学会的事情。
发表评论
-
15款基于浏览器扩展的WEB开发工具
2009-07-29 08:44 745WEB开发工具的使用已经 ... -
WEB 服务器调试利器 -- Tamper Data(转)
2009-07-29 08:53 723一. 简介 作为 Firefox 的插件, T ... -
图片和文字放一起,不能居中的解决方法
2009-07-29 14:47 919<td align="center" ... -
深入浅出URL编码
2009-08-11 19:58 610版权声明:如有转载请求,请注明出处: http://blog ... -
【CSS布局.2】绝对定位和相对定位
2009-08-20 15:51 574Absolute ,CSS 中的写法是:positio ... -
【CSS布局.1】盒子模型
2009-08-20 15:51 586例子: .box { width: 200px; ... -
【CSS布局.4】五种CSS布局类型
2009-08-20 15:52 615CSS 布局的五种类型概述 有五种基本布局定位类型可供选择: ... -
【CSS布局.3】列表样式定义法
2009-08-20 15:52 573CSS代码: .list{ margin: 0px 10 ... -
区别不同浏览器,CSS hack写法
2009-08-20 16:01 595区别IE6 与FF : backgroun ... -
常用CSS缩写语法总结
2009-08-24 17:55 636使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩 ... -
CSS颜色代码大全
2009-08-25 15:55 822CSS颜色代码大全 FFFF ... -
CSS @import at规则
2009-09-02 10:40 652at规则 HTMLDog指南 > CSS高级指南 &g ... -
彻底弄懂CSS盒子模式之一
2009-09-02 17:05 653前言 如果你想尝试一 ... -
彻底弄懂CSS盒子模式之一
2009-09-02 17:06 589熟悉工作流程 在真正开始工作之前我们脑海中要形成这样一种 ... -
彻底弄懂CSS盒子模式之二
2009-09-02 17:07 580作者:唐国辉 实现原理动画演示:http://www ... -
彻底弄懂CSS盒子模式之三
2009-09-02 17:08 702一、下面请看float的精彩表演,有请。 大 ... -
彻底弄懂CSS盒子模式之五
2009-09-02 17:09 557在本人上一篇教程《彻 ... -
彻底弄懂CSS盒子模式之四
2009-09-02 17:09 653前言 在用CSS控制排版过程中,定位一直被人认为是一个难 ... -
CSS 盒模型
2009-09-02 17:11 572整理自:The CSS Box Model 中文:CSS 盒 ... -
DOM标准与IE的html元素事件模型区别
2009-09-23 13:35 666事件 HTML元素事件是 ...
相关推荐
CSS浮动属性Float详解 什么是CSS Float?
DIV+CSS布局:CSS浮动float属性详解 不解释
CSS浮动属性Float详解[收集].pdf
DIV+CSS布局:CSS浮动float属性详解[归纳].pdf
DIVCSS布局:CSS浮动float属性详解
笔记:浮动属性float的应用的全部源代码。
给元素本身添加float属性 float值: left 元素向左浮动。 right 元素向右浮动。 none 默认值。元素不浮动,并会显示在其在文本中出现的位置。 inherit 规定应该从父元素继承 float 属性的值...
我并没有对CSS所有的属性都有很清晰的情感化的理解,我用CSS才几年啊,我要学的还有很多。但是,对于CSS中常用的float属性,我还是有些感觉的,这也是本文的...本文将会从我的一些感性的认识的角度讲解CSS float属性
如何正确的理解CSS的float浮动属性.pdf
...
...
我并没有对CSS所有的属性都有很清晰的情感化的理解,我用CSS才几年啊,我要学的还有很多。但是,对于CSS中常用的float属性,我还是有些感觉的,这也是本文的...本文将会从我的一些感性的认识的角度讲解CSS float属性
具体详细的阐述了css浮动如何解决和浮动产生的原因。
css浮动和定位
本文针对CSS浮动float、定位position进行学习理解,通过实例帮助大家掌握CSS浮动float、定位position技巧,感兴趣的小伙伴们可以参考一下
从零开始学前端 - 6. CSS浮动float详解 示例代码 : 她不美却常驻我心 博客地址: https://blog.csdn.net/qq_39506551 CSDN 上传的资源会自动涨积分,如有需要留下邮箱
主要介绍了css浮动(float/clear)使用方法,如果你理解CSS盒子模型,但对于浮动不理解,那么这篇文章可以帮助你