06月14, 2012

大话FLOAT

互联网的快速发展促使网站开发变得非常复杂,想当初一个网站就是N多的超级链接外加几张图片,布局也是清一色的table布局,那时用td来分隔不同内容,现在有了DIV+CSS,使整个网站开发有了革命性的变化,使得网站的结构更加清晰明快,逻辑更加通俗易懂,我们不得不感谢CSS,不得不感谢DIV,更要感谢JS,哈~

谈了些个人情感后,进入今天的正题——浮动,为什么我要写这个话题,因为浮动对我们页面重构师来说是既爱又恨,爱的是我们用它来进行结构布局,我们用它来进行列表展示,恨的是浮动产生了非常非常多的不确定因素,也是诸多bug的根源。

首先,我们为什么要用浮动,那是因为HTML有块级元素与内联元素之分,块级元素的属性是独占一行,内联元素是并排展示,内联元素没有宽度、高度,每一行的高度由行内最高的元素为标准,比如一行文字与一张图片并排,如果图片的高度大于文字的高度,那么这一行就以图片的高度为准,如图1:

但是问题来了,如果我们要实现如图2这样的布局该怎么办呢?

这两个版块有自己的宽和高而且还要在同一行显示,那好,浮动出场了,浮动使两个块级元素有了内联元素的特性,那为什么浮动会这样呢?之所以行内元素能够顺序呈现是因为它们没有高度的概念,所以我们是不是可以这样理解,浮动后,块级元素就失去了高度。有的人会说,不可能,我明明定义了块级元素的高度,并且在浏览器中也确实呈现了这个高度,好,我们给这两个浮动的块级元素外边再包裹一个层,我们称之为父容器,给这个父容器设置个背景,我们想想,应该这个父容器完全包裹住这两个层,因为之前说过,这两个层是有高度的呀!但是结果是什么样子的呢?如图3:

父容器并没有包裹住这两个层,我们只能说,父容器不知道这两个层的高度,从而使得这两个层溢出了父容器,这也就是我们为什么要在浮动之后,要清除浮动的根源,就是让我们的父容器识别出内部元素的高度,知道了这些,我们不由得说一声,浮动给我们带来了方便的同时,也确实给我们增加了不少麻烦,至于怎么实现清除浮动,那是另一个话题,这里先暂时不做描述了。同时我顺带说一下,有人会问,为什么不用inline-block呢?的确,这个属性可以实现效果,但是inline-block是一个没有方向的浮动,也就是说它只能从左到右排列,而float可以实现左、右两个方向的浮动。

最后要说的是,浮动确实给我们带来了许多方便,所以使得在WEB中有被滥用的趋势,谈到这里,我们团队会把滥用浮动的童鞋叫浮动控,呵呵。其实也是为了提醒大家,我们只在不得不使用浮动的时候使用它,能不用时尽量不用,这也是为什么CSSLint在检验时会提醒大家使用了过多的浮动,我想也是因为浮动会给我们带来许多麻烦吧。

还要多说一句,在图文混排,无论图与文哪个浮动,或者纯文本与一个浮动元素混排时,都要将浮动元素放在最前面,因为,根据HTML规则,内联元素中有浮动元素,如果浮动元素不在最前面,浮动元素不起作用。

好了,就写到这里吧,最后把浮动的16条规则复制粘贴过来,以备大家在迷惑时,过来再熟悉一下!

  1. 浮动元素会从文档正常流中删除,但它仍会影响布局。
  2. 浮动非替换元素必须为其指定width,否则元素的width会趋于0而导致浮动元素不能完整显示。
  3. 一旦元素具有了浮动属性,它便成为了一个块级元素。
  4. 浮动元素的左右外边界不能超出包含块的左右内边界。
  5. 浮动元素永不会重叠。
  6. 浮动元素不会超过容器的上padding。
  7. 后浮动的元素永不会超过先浮动元素的顶端。
  8. 浮动元素会尽可能高地放置,便这个高受限于规则6和规则7。
  9. 浮动元素的下边界没有要求,因此当容器不足以容下浮动元素时,浮动元素会向下延伸。但部分浏览器会采取增大容器高度以容下浮动元素,而对于符合CSS2.1规范的浏览器要想让容器容下浮动元素的一个可行方法是:让容器也浮动。
  10. 浮动元素向下延伸时,不会影响正常文本的显示,文本会相对于浮动元素进行偏移。但部分文本背景会被浮动元素遮住。
  11. 如果浮动元素设置了负的外边距、这将破坏规则4、6、7。
  12. 当浮动元素的width>容器的width时,这会使得浮动元素超出容器的左右边界(超左超右依浮动方向而定)。
  13. 浮动重叠规则:行内框(如strong)与浮动元素重叠时,其边框、背景、内容均位于浮动元素之上;块框与浮动元素重叠时,其边框、背景在浮动元素之下,而内容在浮动元素之上。
  14. 对某个元素应用clear:left,意味着这个元素的左边不能有浮动元素。
  15. clear不能用于非块级元素,比如
    ,在大多数浏览器看来它是一个非块级元素,因此如果对br应用clear来清除浮动不会有任何效果,除非改变br的display:block。
  16. 如果某元素应用clear清除浮动,则此元素设置的上外边距值会被忽略,但会有一个重新计算的上外边距值(甚至可能为0).如果希望此元素与浮动元素之间有一个明确的间隔,可以在浮动元素上设置下外边距。

本文链接:https://75team.com/post/大话float.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。