大牛程序员分享:我所认识的css之浮动与你的见解

原创 群572877331 随笔 JavaScript 178阅读 2017-11-22 14:34:24 举报

一、我对css的情感

我不清楚他人是如何看待CSS的,CSS的这些属性在他们心中是个什么东西,他们到底予了多少自身的情感。其实一开始在学习css的时候可能只是盲目的去学他们是怎么用的,但是我们在不断学习与工作的过程中,我不知道各位有没有突然对代码产生感情了,在潜意识层面逐渐积累起来的,一切悄然而至,不知不觉。当我们积累到一定阶段后,会突然发现,关于代码,我们已经形成了自己的世界观和属于自己的准则。举个例子:假设你将每个CSS属性都看做是你的恋人,一开始我们只是单纯的想拥有到到她、得到她,时间长了,你可能有时会对这份感情产生厌倦,就像很多人学完css之后感觉特别简单,也没有什么嘛!但是往往一份感情最终破裂的原因是因为你对你的另一半不了解,没有意识到你真正想要以及对方想要的是什么。如果你是真的想要了解对方以及往更深层次的发展,随着你的深入你会挖掘到更多的一些对方的性格,交往到了一定的程度就会把自己的恋人的性格摸得一清二楚,相处以及管教也就更从容了。当然,我并没有对CSS所有的属性都有很清晰的情感化的理解,其实我要现在学的还有很多。但是,对于CSS中常用的float属性,我还是有些感觉的,这也是本文的主旨所在。

二、我对浮动的情感化认识

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

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

在现在我们使用float浮动的时候,大多数人第一反应就是不就是用来布局的,让竖直的元素横排展示或者往更深层次的说就是脱离文档流。正是因为这些原因呢,让我们现在大多数的开发者忘记了浮动是干什么的?其实我们现在所认知的float是做了很多其本职工作以外的事情,于是我们会混淆,才会使我们会看不清float真正的面目。浮动真正的意义在哪里呢?从什么地方得知呢?不妨我们来反推一下,假设我们现在的一个导航栏或者分栏布局的CSS中有浮动(float)属性,去掉float,你肯定会发现排版变了,不再是我们想要的效果;那我们现在再想把它还原(不能再用float喽),发现用display、flex等都可以代替实现。再假设一下,我们现在也会在网站中经常会看到一些图片周围包裹着一些文字,当然这肯定也是用浮动实现的,去掉float,你肯定又会发现排版变了,那跟上面的思路一样,我们现在再想把它还原,你可能会搞到绝望,突然没招了。我是想不出来能有什么方法可以让文字环绕图片显示。所以这才是我今天要说的重点,这个替代不了的作用才是float真正的意义所在。

大牛程序员分享:我所认识的css之浮动与你的见解

例如上边这张截图,这才是浮动应该做的事情。这是非常重要的结论,这是深入理解浮动属性的基础,所以,请记住,浮动出现的意义其实只是用来让文字环绕图片而已,仅此而已。而我们目前用浮动实现页面布局本不是浮动该干的事情。

浮动的本质是什么?

浮动的“包裹性”
我们都知道display:inline-block某种意义上的作用就是包裹,而浮动也有类似的效果。举个例子,或许您有实现宽度自适应文字内容的经验,实现宽度自适应的关键就是要让盒子的大小自适应于文字的个数,这就需要盒子要自动包裹在文字的外面。我们用什么方法实现呢?一就是display:inline-block;二就是float。如下图:
display:inline-block方法
css代码如下:

.box{display: inline-block;height: 50px;line-height: 50px;background: red;}
HTML代码如下:

<div class="box">我是浮动,我是浮动,我是浮动,我是浮动,我是浮动,我是浮动,我是浮动,我是浮动,我是浮动,我是浮动,我是浮动</div>
结果如下图:

大牛程序员分享:我所认识的css之浮动与你的见解

float:left方法

此方法的CSS代码与上面的inline-block方法唯一不同之处就在于把display: inline-block改成float:left即可,结果和上图一样;

从上面这个例子说明浮动属性(无论是左浮动还是右浮动)某种意义上而言与display:inline-block属性的作用是一模一样的,所以类似于display:block; float:left;这种写法肯定是多余的,谁也不会这样做。然而,float无法等同于display:inline-block,其中原因之一就是浮动的方向性,display:inline-block仅仅一个水平排列方向,就是从左往右,而float可以从右往左排列,这就是两者的差异。然而,我们又有多少情况需要元素从右往左排列呢?很少,所以,CSS中,没有浮动这一属性不是什么大不了的事情,它其实就那么回事。

2、浮动的“破坏性”

浮动可以说是所有CSS属性中的“破坏之王”。要理解浮动的破坏性,我们要从浮动最原始的意义入手。所以,只要您弄明白了为什么文字会环绕含浮动属性的图片,您就会知道浮动的“破坏性”是什么意思了。

“破坏性”说明:

首先要了解这个概念之前,我们要知道一些知识点,CSS Box(盒模型/框模型)里面的Block Box和Line Box。具体了解的话,可以到https://segmentfault.com/a/1190000005155084这个网站去查看。

Block Box

display : block 、 list-item 以及 table 会让一个元素成为块级元素。

Line Box

每一行称为一条Line Box,它又是由这一行的许多inline-box组成,display:inline会让一个元素称为行内元素

正常的图文混排

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

大牛程序员分享:我所认识的css之浮动与你的见解

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

含有浮动属性的图片与文字

大牛程序员分享:我所认识的css之浮动与你的见解

刚才说过,正常情况下,图片自身就是个inline boxes,与两侧的文字inline boxes共同组成了line boxes,但是,一旦图片加入了浮动,情况就完全变了。我认为是浮动彻底破坏了img图片的inline boxes特性,至少有一点我可以肯定,图片的inline boxes不存在了,被恶魔附体,变身了,而这个恶魔就是浮动。一旦图片失去了inline boxes特性就无法与inline boxes的文字排在一行了,其会从line boxes上脱离出来,跟随自身的方位属性,靠边排列。这个从line boxes上脱离的浮动元素其实就是一个浮云,躯体,一个空壳子,表象。因为其没有inline boxes。有人可能会问,没有inline boxes就没有呗,有什么大不了的?非也非也!这个inline boxes很个很重要的概念,如果你对line-height有深入了解的话你就会知道line boxes有多么重要,在这里我就不过多阐述了。直接说一下line boxes的重要性:对于line box模型的元素而言,没有inline boxes,就没有高度了;而浮动却恰恰做了这么龌龊的事情,其直接将元素的inline boxes也破坏了,于是这些元素也就没有了高度。这篇文章共享之前我仍是要引荐下我自个的前端群:572-877-331,不论你是小白仍是大牛,小编我都挺期待,不定期共享干货,包含我自个整理的一份2017最新的前端材料和零根底入门教程,期待初学和进阶中的小伙伴。

总结

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

虽然上面说了这面多,但是这里面涉及的东西都是看不见的,很多概念性的抽象的东西,配了图,但是还是觉得没有讲得很明白。后面有机会继续给大家详解。其实通过上面你们也应该能知道我所传达的一个理念,学习这东西是无止境的,我们对知识越深层次的探讨,就会感觉到自己越来越渺小,这是正常的,每个人想成为一个行业顶尖的大牛都会经历过这一个阶段,这也促使我们学习一定不仅仅是学习一个东西的表面,更重要的事去了解它的原理和机制。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复