CSS进阶（9）—— 那些年骗过你的float和“清浮动”

若是你被这个标题骗进来，那恭喜你，你得到了一个从新认识float的机会，这句话不只是我想对前端程序猿说的，也是我想对本身说的。在使用flex布局以前，float一度是我最最喜欢用的布局方式，在没有接触CSS world以前，我甚至认为float才是最符合"流"特质的属性，我本身将float属性定义成CSS的“果冻属性”，多是由于float元素会像一颗果冻同样在图文间滑来滑去。事实上，咱们都知道，float是一种破坏文档流的属性，除了float，position属性不为static/relative的时候也会破坏文档流，但他们破坏的方式却差不少，相比之下，float要温和的多，由于float还要顾虑相邻节点的感觉，在遇到图文的时候，float会选择绕道而行，而position:absolute/fixed则不一样，他们只管最近的具备定位属性的父节点。所以，float的破坏方式较为温和，像个果冻，而position的破坏方式比较暴力，像一片云，超脱于一切之上，彻底飘了的感受。说了这么多，有些跑题，下面正式开始本章的内容，深刻了解float，在过程当中揭秘咱们对浮动以及清浮动深深的“误解”。

## 1.探究图片环绕文字的传说

在深刻了解float以前，相信你们都听过一个传说，就是float被设计出来的目的是为了实现文字环绕图片的效果，多是初学的时候忘了，仍是受了“清浮动”的毒，我本身都忘了有没有用float去实现过这个效果。所以下面咱们先来实现一下float的设计初衷，文字环绕图片效果。

<div style="width: 200px">
    <div style="float: left;">
    	<img width="100" height="100" src="../小和尚.jpg">
    </div>
    <p>我想实现文字环绕，所以须要多一些文字看一下效果我想实现文字环绕，所以须要多一些文字看一下效果</p>
</div>
复制代码

很是简单的一段代码，也不须要什么牛逼哄哄的操做，float就帮助咱们实现了文字环绕图片的效果。为了实现这种效果，CSS设计师在设计float属性的时候定义了float的两个特性。

（1）“破坏文档流”，使得父元素得高度塌陷。

（2）禁止行框盒子与浮动元素发生重叠。

下面咱们结合这两个特性，来讲说图片是如何环绕文字的。第一点，破坏文档流，使得父元素高度塌陷，这个时候，咱们的p标签做为一个block元素，确定是想着我要填满父容器的宽度，而事实上，块级元素也是不辱使命的完成了本身的任务，咱们能够给块级标签加个背景色，而后把图片搞成小透明，看一下是否是这样。

果真，第一个条件生效了，然而高度塌陷只是让浮动元素和块级元素在一个水平线上了，如何实现文字环绕效果呢？这个时候就须要咱们的第二个属性出场了，就是float元素禁止与行框盒子发生重叠（我的认为这是float和绝对定位的最大区别之一），对“行框盒子”还不理解的童鞋请转内联元素那章。注意，我特地强调了行框盒子，也就是本例中匿名内联元素生成的每一行，这个跟块级元素的盒子没有半毛钱关系。为了验证这个想法，咱们能够把p标签转化成内联元素（display:inline)看下效果。为了看上去更明显，我把图片的透明度设成了0，能够看到，浮动元素确实是和行框盒子发生了不重叠的关系。-

至此，咱们已经彻底了解了那个float的传说。

2.浮动锚点和浮动参考？听都没听过！

我估计在座的各位和我同样（是个辣鸡），都是第一次据说浮动锚点和浮动参考，更别说去了解特么的概念了。干巴巴的讲概念在CSS世界里根本行不通，不少东西都要经过实践，确认过眼神才可以去猜想其内部的原理。那么咱们就经过一个例子来了解一下这两个概念。

<!-- 测试浮动参考 -->
<div style="width: 200px;text-align: justify;background: yellow">
    <span>这里有不少文字，且要超出一行且要超出一行且要超出一行</span>
    <span style="float: right;color:blue">更多</span>
</div>
复制代码

首先上面这个例子，文字超出一行的时候，浮动元素会浮在哪儿？是文字的第一行？仍是文字的最后一行？仍是随便浮？答案是，最后一行，看一下具体效果就知道了。

因为markdown编辑器支持标签语言，所以咱们能够直接预览最终效果以下（小提示：你能够经过浏览器直接检查下面的元素看到CSS样式）

这里有不少文字，且要超出一行且要超出一行且要超出一行 更多

结果已经出来了，那么，为何呢？

这个时候就要邀请咱们的浮动参考出场了。浮动参考，顾名思义，就是指float元素要对齐参考的实体是谁？

在CSS世界中，float元素的浮动参考是“行框盒子”，这个行框盒子特么又出来了，怎么感受哪儿都有它。注意是行框盒子，跟其父容器子元素等等等等都没半毛钱关系。这里做者舒适提示，在新的标准中，float的浮动参考不只仅是行框盒子，但他没有展开，我也懒得查阅，就当留个悬念。知道了浮动参考的概念后，咱们就能够解释上面这个例子了，因为float元素是参考行框盒子对齐的，所以，float可能在第一行，也可能在第二行，为何在第三行呢？

这里其实做者没有说明，我提出一个假设，就是浮动元素参考的是离他最近的行框盒子，这个观点由本人提出，由本人验证后发现事实就是这样，因此有时候CSS的世界就是瞎猜一通而后验证。下面我来简单验证一下这个观点，其实很简单，只要把浮动元素放到span标签前面就能够了。以下所示

<!-- 验证浮动参考是离他最近的行框盒子 -->
<div style="width: 200px;text-align: justify;background: yellow">
    <span style="float: right;color:blue">更多</span>
    <span>这里有不少文字，且要超出一行且要超出一行且要超出一行</span>
</div>
复制代码

因为markdown编辑器支持标签语言，所以咱们能够直接预览最终效果以下（小提示：你能够经过浏览器直接检查下面的元素看到CSS样式）

更多 这里有不少文字，且要超出一行且要超出一行且要超出一行

结果彻底印证了个人想法是正确的，我吹爆我本身！

说完了浮动参考，那么什么是浮动锚点？浮动锚点是float元素所在流中的一个点，你能够理解为是一个空的内联元素，为何要有这个点呢？道理很简单，有时候咱们的浮动元素没有能够参考的行框盒子，也就是他的四周都被一群block大汉包围的时候该怎么办？往哪里定位？没有关系，他本身带一个能够参考的浮动锚点。因为这个属性没什么特殊之处，这里就不过多介绍了，了解一下就好。

3.那些年你被骗过的clear“清浮动”

相信咱们初学浮动的第一课便被灌输了“浮动”破坏文档流是个祸害的思想，为了解决浮动元素致使高度坍塌的“bug”，咱们被要求清浮动。而后给了一大堆清浮动的方法，最后提出最好用的是after伪类清浮动，当时还真以为煞有其是，如今看来真的是人言可畏。若是CSS自家制定的标准都被看成了bug，那还有什么不是bug呢？

看完这一章后，你应该能够明白两个概念：第一，浮动引发的高度坍塌是为了解决图文环绕效果而被制定的标准，并非所谓的bug。第二，所谓的clear清浮动，并无清除掉浮动。

为何说clear没有清除掉浮动呢？从字面意思上理解，clear确实是清除的意思，然而官方对于clear的解释是：元素盒子的边不能和前面的浮动元素相邻。

这句话听起来很拗口，但能够明确的知道，clear并无改变任何浮动元素的特性，浮动元素依旧是那个浮动元素，无论你清不清，他仍是在那边，浮着。

那么这句话的涵义是什么呢？仔细剖析一下，你会发现，“清浮动”的奥秘就在于这个不能相邻的标准。事实上，clear被制定出来就是为了解决口耳相传的“高度坍塌bug”，所以浮动元素自己的特性被完美保留。概念讲的干了，来看一个例子吧

<!-- 清浮动原理探究 -->
<div>
    <div class="li"></div>
    <div class="li"></div>
    <div class="li"></div>
    <div class="li"></div>
    <div class="li"></div>
    <div class="li"></div>
    <div class="li"></div>
    <div class="li"></div>
    <div class="li"></div>
    <div class="li"></div>
</div>
<style> .li{ float: left; margin: 10px; width: 40px; height: 40px; background: yellow } .li:nth-of-type(3){ clear: both; } </style>
复制代码

上面这个例子，最终li会被清浮动分割成几行？

最终结果是：两行。因为markdown编辑器支持标签语言，所以咱们能够直接预览最终效果以下（小提示：你能够经过浏览器直接检查下面的元素看到CSS样式）

咱们用所学的理论知识来解释下为何是两行，在样式表中，第三个浮动元素使用了清浮动的属性，此时，根据标准，当前元素不能和前面的浮动元素相邻，也就是第三个元素不能和第二个元素作朋友了，那只能换行了，然而标准没有规定第三个元素不能和后面的元素作朋友，所以第三个元素以及以后的元素依旧保持左浮动的特性规则排列。因为第一行和第二行都保持了浮动的特性，所以高度所有坍塌，此时父级容器div的高度依旧是0，不会由于清了浮动，父容器的高度就变成第一行的高度了，父容器高度依旧是0！注意是0！(因为我直接用了标签去展现结果，父元素高度坍塌会致使文章排版出问题，所以F12检查元素的时候会发现父元素高度不是0，是由于利用了BFC特性加了overflow，这个在下一章会详细探讨)

看完了上面的例子，再来简单了解下clear的四个属性，分别是none(默认，就是没有)，left（清左浮动），right（清右浮动）以及咱们最经常使用的both(全清)。做者这里给出了clear的基本使用方式就是clear:both。left和right属性根本没有软用，让CSS本身判断就行了，由于不可能有一个元素既是left又是right浮动的，所以无需考虑是清左浮动仍是右浮动，全清就完事了。

因为clear只能确保和前面的元素发生关系，所以咱们最常使用的是after伪类清浮动，而不是before，由于before生成的元素根本无法和后面的元素交流clear的事情。最后咱们放上咱们最喜欢使用的after伪类清浮动的方法，注意clear属性只有块级元素才有效，而伪类的默认属性是内联值，不要忘了display:block申明。

<div class="clearfix">
    <div class="li"></div>
    <div class="li"></div>
    <div class="li"></div>
    <div class="li"></div>
    <div class="li"></div>
    <div class="li"></div>
    <div class="li"></div>
    <div class="li"></div>
    <div class="li"></div>
    <div class="li"></div>
</div>
<style> .li{ float: left; margin: 10px; width: 40px; height: 40px; background: yellow } .li:nth-of-type(3){ clear: both; } .clearfix::after{ content: ''; display: block; clear: both; } </style>
复制代码

本章到这里其实尚未结束，下一章的内容会继续探讨float的BFC特性，以及如何用overflow真正的清除浮动。

不忘初心，方得始终

喜欢博主的童鞋能够扫描二维码加博主好友~ 也能够扫中间二维码入驻博主的粉丝群（708637831）~固然你也能够扫描二维码打赏并直接包养帅气的博主一枚。