CSS float浮动的深刻研究、详解及拓展(一)

概念目录

  • 我的感悟之CSS代码的情感化思惟
  • 我的观点之浮动的意义仅仅是文字环绕显示而已
  • 我的观点之浮动的本质是“包裹及破坏”
  • 我的观点之目前大多数浮动应用都不是浮动应该作的
  • 我的观点之浮动实际上是个魔鬼、混球

1、引言

你我看待事物的方式不一样,价值取向也不一样,由于咱们有着不一样的世界观,价值观。这种世界观的差别不只仅体如今实际的生活中,也反映在代码上。你我看待代码的方式,或者说是代码在咱们情感层面的位置是不同的,我这里说的是情感层面,与逻辑无关,与算法无关(虽然算法受情感影响)。这种看待代码的方式是咱们在不断学习与工做的过程当中积累出来的,是在潜意识层面逐渐积累起来的,一切悄然而至,不知不觉。当咱们积累到必定阶段后,会忽然发现,关于代码,咱们已经造成了本身的世界观和属于本身的准则。回到我刚提到的“情感层面”,这个词也能够用“感性思惟”来代替。一般而言,程序-代码属于很理性很逻辑的东西,与感性-情感这类词搭不上边,可是CSS例外。CSS也属于代码范畴,并且是一种伟大的代码,其有别于C,JAVA之类程序语言——没有算法,没有复杂的逻辑。因而,CSS有了先天的优点能够渗入一些感性的情感化的东西。正如我上面说起的,大多数状况下,这种渗入是无心识的(除非有人直接表露——就像我如今所作的),而且是个体差别明显的(由于是专属于本身的情感化的东西)。弗洛伊德将人格划分为无心识、前意识和意识,我发现代码的情感化思惟造成正是走的从无心识到前意识到意识的路线,因此我我的认为:情感化的代码也属于人格的一部分。因而,有了“CSS-情感化代码-人格”这一微妙的关系。 javascript

我不清楚他人是如何看待CSS的,CSS的这些属性在他们心中是个什么东西,他们到底赋予了多少自身的情感(或人格或品性或特质等)在这些代码身上,他们是否已经意识到这些CSS属性身上正一点一点地融入他们情感化的一些东西。但我清楚本身,在这些CSS的属性身上添加了不少我的的色彩,这种情感化的东西能够说让我更好的理解CSS,我想这不难理解,举个例子:假设你将每一个CSS属性看作是你的孩子,每一个孩子有着不一样的性格,随着学习你会挖掘到更多的一些性格,这就比如母亲看着本身的孩子一点点长大,到了必定的程度就会把本身的孩子的性格摸得一清二楚,管教也就从容了。固然,我并无对CSS全部的属性都有很清晰的情感化的理解,我用CSS才几年啊,我要学的还有不少。可是,对于CSS中经常使用的float属性,我仍是有些感受的,这也是本文的主旨所在。本文将会从个人一些感性的认识的角度讲解CSS float属性。因此,这里,你会看到别样的技术文章。 css

2、浮动的情感化认识

我对浮动感性化的认识:浮动就是一个变态,魔鬼,自私自利且影响他人的混球。我讨厌浮动。 html

3、浮动的原始意义是什么?

咱们使用float浮动作了不少其本职工做之外的事情,因而咱们会混淆,咱们会回看不清float真正的面目。浮动真正的意义在哪里呢?要知道这个问题的答案很简单,假设如今CSS中没有浮动(float)属性,那么会变成一个什么样子。咱们会发现,目前流行采用浮动方法实现的不管是分栏布局,仍是列表排列咱们均可以用其余一些CSS属性(不考虑table)代替实现,惟一一个实现不了的就是“文字环绕图片”,我是想不出来能有什么方法可让文字环绕图片显示。好,这个替代不了的做用才是float真正的意义所在。此做用相似于word中的版式,很基础的原始的做用: java

与浮动本职做用相似的word版式

例如左边这张word截图就含有左浮动属性(float:left),这才是浮动应该作的事情。这是很是重要的结论,这是深刻理解浮动属性的基础,咱们后面探讨的一些浮动相关的问题均可以由这里引伸出来,因此,请记住,浮动出现的意义其实只是用来让文字环绕图片而已,仅此而已。而咱们目前用浮动实现页面布局本不是浮动该干的事情。 算法

4、浮动的本质是什么?

我将浮动的本质定义为“包裹与破坏”! wordpress

1. 浮动的“包裹性”
先说句您应该没有见过的结论:撇开浮动的“破坏性”,浮动就是个带有方位的display:inline-block属性。 布局

display:inline-block某种意义上的做用就是包裹(wrap),而浮动也有相似的效果。举个常见例子,或许您有实现宽度自适应按钮的经验,实现宽度自适应的关键就是要让按钮的大小自适应于文字的个数,这就须要按钮要自动包裹在文字的外面。咱们用什么方法实现呢?一就是display:inline-block;二就是float。例如咱们要实现新浪博客中的“发表文章”之类的宽度自适应按钮(以下图): 学习

新浪博客某宽度自适应按钮背景图片为: 动画

display:inline-block方法 url

CSS代码以下:

.btn1{display:inline-block; background:url(http://www.zhangxinxu.com/study/image/sina_gray_btn.png) no-repeat left top; padding-left:3px; color:#000000; font-size:12px; text-decoration:none;}
.btn1 cite{display:block; line-height:26px; padding:0 13px 0 10px; background:url(http://www.zhangxinxu.com/study/image/sina_gray_btn.png) no-repeat right top;}

HTML代码以下:

<a href="javascript:void(0);" class="btn1"><cite>inline-block方法</cite></a>

结果以下图:

inline-block方法实现的宽度自适应按钮

float:left方法
此方法的CSS代码与上面的inline-block方法惟一不一样之处就在于这里是float:left;

CSS代码以下:

.btn1{float:left; background:url(http://www.zhangxinxu.com/study/image/sina_gray_btn.png) no-repeat left top; padding-left:3px; color:#000000; font-size:12px; text-decoration:none;}
.btn1 cite{display:block; line-height:26px; padding:0 13px 0 10px; background:url(http://www.zhangxinxu.com/study/image/sina_gray_btn.png) no-repeat right top;}

HTML代码以下:

<a href="javascript:void(0);" class="btn1"><cite>float方法</cite></a>

结果以下图:

float方法实现的宽度自适应按钮

您能够狠狠地点击这里:按钮宽度自适应demo

上面这个例子旨在说明浮动属性(不管是左浮动仍是右浮动)某种意义上而言与display:inline-block属性的做用是如出一辙的,因此相似于display:block; float:left;的CSS代码超过95%的状况是没有道理的(display:block是多余的)。然而,float没法等同于display:inline-block,其中缘由之一就是浮动的方向性,display:inline-block仅仅一个水平排列方向,就是从左往右,而float能够从右往左排列,这就是二者的差别。然而,咱们又有多少状况须要元素从右往左排列呢?不多,因此,CSS中,没有浮动这一属性不是什么大不了的事情,它其实就那么回事。

2. 浮动的“破坏性”
浮动能够说是全部CSS属性中的“破坏之王”。要理解浮动的破坏性,咱们要从浮动最原始的意义入手。我在上面把浮动的原始意义用粗斜体表示出来了,就是“只是用来让文字环绕图片而已,仅此而已。”

因此,只要您弄明白了为何文字会环绕含浮动属性的图片,您就会知道我所说的浮动的“破坏性”是什么意思了。//下面这部份内容是本文核心,多我的观点,我尽可能表述清楚。您如有兴趣,能够放慢在这里的阅读速度。

先说结论:文字之因此会环绕含有float属性的图片时由于浮动破坏了正常的line boxes

这里有必要先讲讲line boxes模型。先看下面一段普通的HTML代码:

<p>这是一行普通的文字,这里有个 <em>em</em> 标签。</p>

这段HTML代码涉及到4种boxes:
一、首先是p标签所在的containing box,此box包含了其余的boxes;

二、而后就是inline boxes,以下图标注,
inline boxes示意 >> 张鑫旭-鑫空间-鑫生活
inline boxes不会让内容成块显示,而是排成一行,若是外部含inline属性的标签(span,a,cite等),则属于inline boxes,若是是个光秃秃的文字,则属于匿名inline boxes。

三、line boxes,见下图的标注:
line boxes示意 >> 张鑫旭-鑫空间-鑫生活
在containing boxes里,一个一个的inline boxes组成了line boxes。这是浮动影响布局的关键box类型,下面会详细阐述。

四、content area,见下图标注:
content area示意 >> 张鑫旭-鑫空间-鑫生活
content area 是一种围绕文字看不见的box。content area的大小与font-size大小相关。

正常的图文混排
默认状况下,图片与文字混排应该是这个样子:图片与文字基线对齐,图片与文字在同一行上,以下图所示:

上图中,图片为一个inline boxes,两边的文字也是inline boxes。因为line boxes的高度是由其内部最高的inline boxes的高度决定的,因此这里line boxes的高度就是图片的高度。此时图片与文字是同一box类型的元素(都是inline boxes),是在同一行上的,因此,默认状态下,一张图片只能与一行文字对齐。而要想让一张图片要与多行文字对齐,您惟一能作的就是破坏正常的line boxes模型。

含有浮动属性的图片与文字
先看一下图片添加了float:left样式后的表现,见下图:
浮动图文布局 >>  张鑫旭-鑫空间-鑫生活
刚才说过,正常状况下,图片自身就是个inline boxes,与两侧的文字inline boxes共同组成了line boxes,可是,一旦图片加入了浮动,状况就彻底变了。我认为是浮动完全破坏了img图片的inline boxes特性,至少有一点我能够确定,图片的inline boxes不存在了,被恶魔附体,变身了,而这个恶魔就是浮动。一旦图片失去了inline boxes特性就没法与inline boxes的文字排在一行了,其会从line boxes上脱离出来,跟随自身的方位属性,靠边排列。这种状态跟限制性内切酶起做用几乎一致,一条基因链上(line boxes)有不少的基因(inline boxes),而后限制性内切酶(float)会切除特定的DNA序列,此序列(float元素)就会从基因链上脱离出来。

这个从line boxes上脱离的浮动元素其实就是一个躯体,一个空壳子,表象。由于其没有inline boxes。有人可能会问,没有inline boxes就没有呗,有什么大不了的?非也非也!这个inline boxes很个很重要的概念。我曾在“css行高line-height的一些深刻理解及应用”一文中提到太高度的本质,这里有必要再讲一遍。

在目前的CSS的世界中,全部的高度都是有两个CSS模型产生的,一个是box盒状模型,对应CSS为”height+padding+margin”,另一个是line box模型,对应样式为”line-height”。前者的height属性分为明显的height值和隐藏的height值,所谓隐藏的height值是指图片的高度,一旦载入一张图片,其内在的height值就会起做用,即便您看不到”height”这个词。然后者针对于文字等这类inline boxes的元素(图片也属于inline boxes,但其height比line-height做用更凶猛,故其inline boxes高度等于其自身高度,对line-height无反应),inline boxes的高度直接受line-height控制(改变line-height文字拉开或重叠就是这个缘由),而真正的高度表现则是由每行众多的inline boxes组成的line boxes(等于内部最高的inline box的高度),而这些line boxes的高度垂直堆叠造成了containing box的高度,也就是咱们见到的div或是p标签之类的高度了。因此,对于line box模型的元素而言,没有inline boxes,就没有高度了,而浮动却偏偏作了这么龌龊的事情,其直接将元素的inline boxes也破坏了,因而这些元素也就没有了高度。

咱们所处的这个世界时须要坏人来维持平衡的。武侠世界里不是常有要消灭某个超牛叉的大魔头时,会有人修炼魔功与之抗衡嘛。浮动彷佛就是这样的一个角色,在网页最初的时候就是显示一些图片的文字啊什么的,所须要的布局也就那么几个,其中之一就是文字环绕图片显示了,但是怎么实现这样的效果呢?聪明的CSS开发者就创造了一个修炼“魔功”的float属性,其做用就是破坏line boxes模型好让文字环绕图片显示,最后实现了吗?确实实现了。还记得我屡次说到的浮动的意义吗——只是用来让文字环绕图片而已,而要实现这个就须要用到浮动的“破坏性”。

沿用上面图片的例子。浮动破坏了图片的inline box,产生了两个结果:一是图片没法与文字同行显示,脱离了其原来所在的line box链;二是没有了高度(无inline box -> 无line box -> 无高度)。而这些结果偏偏是文字环绕图片显示所必须的。

文字环绕图片显示的缘由
先看下面的flash动画演示(点击按钮开始):

动画所演示的关键点其实就是上面的一系列分析与讲解,即“包裹与破坏”!包裹是让标签占据的空间水平收缩,破坏是破坏的inline box。正如上面讲解的,inline boxes是高度造成的基础,浮动破坏了inline boxes也就没有高度可言了。真是因为浮动元素没有了inline boxes,没有了inline boxes高度,才能让其余inline boxes元素从新整合,环绕浮动元素排列。

咱们如今假设浮动没有破坏inline boxes,那么虽然图片会靠左显示,可是其会与文字造成新的高度包络线(同类聚合),且只能与一行文字造成line box,没法实现文字环绕效果,因此浮动破坏inline boxes是必须的。

咱们能够拿浮动元素与绝对定位元素作对比或许能够帮助理解。与浮动元素同样,绝对定位元素也具备“包裹性”,此“包裹性”适用于任何元素。那么,浮动元素与绝对定位元素的差异在哪里呢?我以为最主要的差异在于:绝对定位的元素脱离了文档流,而浮动元素依旧在文档流中;而这形成的显示上的差别就是:同处于文档流中的文字实体不会与浮动元素重叠,而会与绝对定位元素重叠。这就是文字环绕显示的重要缘由之一:虽然图片实际占据的高度为0,可是因为其宽度实体存在(包裹性),一样是content area 实体的文字不会与之重叠(外部的容器盒子containing box(p,div,ul,li)会重叠),这就比如篮球场上站了个植物人,虽然其几乎不可能得分,运球之类,可是他的实体在那里,它能够阻挡同一水平空间上的同一类型的个体(即人)直接穿过去,要经过,得绕道。可是其没法阻挡整个球队的向前推动。见下图(firebug显示截图):
与浮动元素的重叠 >> 张鑫旭-鑫空间-鑫生活

简短的小结
虽然唠唠叨叨说了这么多,可是我我的以为仍是没有讲清楚,由于这里面涉及的东西都是看不见的,不少概念性的抽象的东西,即便我作了动画,也配了图,可是仍是以为没有讲得很明白。尤为我所说的浮动元素没有高度,“你看,那图片实实在在就在那儿,怎么没有高度?没有高度为何文字会绕行?”因此我免不了在实际高度与inline boxes的关系这类概念间折腾,越折腾显得越乱。不过没有关系,下面我会根据上面的讲解分析浮动元素各类各样的表现,相信会对浮动的深刻理解有更多的帮助。本文仅完成了三分之一,内容较多,我要分篇发布。

(未完待续…)

转载自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]

相关文章
相关标签/搜索