. 前言

CSS世界中的float属性是一个年代非常久远的属性。虽然最初创造浮动并不是为了用于页面布局，但它在布局方面表现得很出色。然而为了理解浮动，我们首先必须牢记它的设计初衷。Web诞生之初，带宽就那么一点点，我们能够做到的也只是展示文字以及零星图片而已，怎么可能浮动设计的目的就是为了实现各种砖头式的复杂布局呢？那个年代复杂布局都是用<table>实现的。既然这样，那float属性设计的目的究竟是什么呢？

2 浮动的本质

很简单，一句话：浮动的本质就是为了实现文字环绕效果。而这种文字环绕，主要指的就是文字环绕图片显示的效果。所以，大家应该也多少对为什么老IE浏览器与浮动相关的bug一火车都装不下有些了解了吧！人家的功能本来就很单纯，只是让文字可以绕着图片跑，你偏要各种布局，结果撑不住了吧！

所以说：浮动是魔鬼，少砌砖头、少浮动，要更多地去挖掘CSS世界本身的“流动性”和“自适应性”，以构建能够适用于各种环境的高质量的网页布局。好的网页应该如同好的建筑。传统的楼房是典型的“刚”式结构，砖头加楼板，问题不言而喻，一个小小的地震可能就被夷为平地；而好的楼房应该是有“柔”在其中，也就是高质量的钢筋结构，当地震导致房屋摇晃的时候，可以通过钢筋的“柔性”卸力而保障整体结构的稳固。台风袭来，很少见到说柔弱的柳树被吹倒，反而会经常看到坚固的电线杆被风吹倒的消息，道理其实也类似。

3 浮动的特性

浮动有三个关键字可以选择，left为向左浮动，right为向右浮动，none为不浮动。无论是行内元素（inline）还是块级元素（block），设置浮动后都会变成块级元素。但表现得却更像行内块元素（inline-block），因为在没有明确宽度的时候，宽度会随着内容自适应，而不是占据一行。

过去，浮动的行为经常受到浏览器bug的干扰，特别是在IE6和IE7中。幸亏这些浏览器几乎已经淡出市场了，我们不必再担心那些bug了。现在我们可以保证各种浏览器对浮动的处理是一致的。但是浮动仍有一些行为会让你措手不及。这些并不是bug，而是因为浮动严格遵循了标准。让我们来看看浮动如何工作，以及怎样调整浮动的行为来实现理想的布局。

float都有哪些有意思的特性呢？具体如下：

• 包裹性

所谓“包裹性”，由“包裹”和“自适应性”两部分组成。包裹假设浮动元素父元素宽度180px，浮动元素子元素是一个120px宽度的图片，则此时浮动元素宽度表现为“包裹”，就是里面图片的宽度120px，代码如下：

.div { width: 180px; }
.float { float: left; }
.float img { width: 120px; }
<div class="div"> 　
    <div class="float">　　
        <img src="float.jpg">　 
    </div>
</div>

自适应性，如果浮动元素的子元素不只是一张120px宽度的图片，还有一大波普通的文字，例如：

<div class="father">
    <div class="float">　　 
        <img src="float.jpg">大家好，我是码农洞见。　
    </div>
</div>

则此时浮动元素宽度就自适应父元素的180px宽度，最终的宽度表现也是180px。

• 块状化并格式化上下文

块状化的意思是，元素一旦float的属性值不为none，则其display计算值就是block或者table。

• 破坏文档流

float通过破坏正常CSS流实现CSS环绕，带来了烦人的“高度塌陷”的问题，然而，凡事都具有两面性，只要了解透彻，说不定就可以变废为宝、化腐朽为神奇。例如。我们可以利用float破坏CSS正常流的特性，实现两栏或多栏的自适应布局。

4 清除浮动

浮动会影响周围元素，并且还会引发很多意想不到的问题。在CSS中，我们可以使用clear属性来清除浮动带来的影响。clear属性语法如下：

clear: none | left | right | both

在实际开发中，我们几乎不会使用“clear:left”或“clear:right”来单独清除左浮动或右浮动，往往都是直截了当地使用“clear:both”来把所有浮动清除，既简单又省事。也就是说，我们只需要记住“clear:both”就可以了。

5 总结

通过阅读本文我们了解到浮动的设计初衷是让文字围绕一个元素排列，但有时这种效果并不是我们想要的。使用清除浮动来包含浮动元素。所谓生生相克，既然有破坏，就有保护其他元素不被破坏的属性。总之，只有深入理解浮动的工作原理，勤加练习才有可能避开常见的陷阱。达到选择合适的工具来实现想要的效果。

6 最后的最后

为初学者提供学习指南，为从业者提供参考价值。我坚信码农也具有产生洞见的能力。关注【码农洞见】，一起学习和交流吧！

天给大家带来了四个线条进行环绕的加载中的效果，我放大了给你们看看，但是你们可以看到，每个线条的旋转动作是一个圆形。

下面是代码区域，我使用的是vivo试图容器，里面包含了第二个试图容器，里面有五个vivo试图容器，前面这四个代表着四根线条，线条下面是文字。主要的是css代码区域，我使用的是开发工具是s plus x，是开发uniap的。

先给大家解释一下代码部分。

·首先是第一个vivo式图容器，使用弹性布局集中对齐，顶部距离进行相反像素的设置。

·第二个又是图中签，也是进行绝对定位，集中对齐相对定位等。

·下面就是h三，文字是白色，大家可以看到知道。

·这是第一个线条，设置了一个宽度、高度、边框、透明度、圆角、绝对定位。主要是第一根线条的动作是个动画，进行了应用旋转动画，无限循环。边框颜色为了粉色，大家可以看到粉色，因为为什么这么细？大家可以看到因为在防木人状态下设置了一个一的边框，线条的宽度是一，所以是细的。

·第二个就是第一个线条动画，它引用是哪个动画？就是下面设置一个旋转角度和结束的旋转角度形成一个圆形，从五十到一百一，再从五十到四百七，大家可以看一下形成这么个动画。

·下面第二根线条、第三根线条、第四根线条基本上都是一样的动画，所以大家只需要把第一根线条的写法知道就行了。

·下面的其实位置的变化而已和颜色大家可以看到，其他地方基本上没有太多的区别，就是美国旋转的角度是不一样的。第一个旋转角度是四百七，第二个是三百八，然后是九十，然后是六百三，就这不一样，价格方都是一样的。

感兴趣的同学可以找我唠嗑进行获取元代码，进行二十四的编写也可以，也可以自己去手动去学。

喜欢的可以点赞收藏一下，本期就讲到这。