CSS浮动属性的超基础解析

在介绍CSS浮动属性之前，我们要先了解什么是CSS？什么是属性？
一．CSS：为层叠样式表
官方解释CSS是一种用来表现HTML和XML等文件样式的计算机语言。属性，则是CSS语法中的关键字，一种属性规定了格式修饰的一个方面。接下来咱们举个例子，我想会更容易理解一些。
首先，假设“你”就是HTML，你身上的器官包括四肢构成你身体的就是HTML中的各种标签，接着你穿各种各样的衣服来装饰你自己，这就些衣服和装饰品就是CSS。 也可以这么理解：一个毛坯房就是HTML框架，精装房就是加了CSS。 属性的话，就刚刚的第一个例子：比如想把衣服的颜色设为红色，那在CSS的属性中例如为color：red；这就是CSS中的颜色属性。还有很多属性，通了这一条路，剩下的路也好走了很多。值得一提的是，CSS中还有很多属性，不要浅显的单一理解。
二．CSS浮动属性
有了上面的解释，我们来看CSS中的浮动属性就方便很多了。浮动属性是CSS众多属性中的一种。正常的文档流是自上而下的显示顺序（块状元素来说），而浮动属性（float）就是让上下排列的元素可以左右排列。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。浮动的元素仍然是网页流的一部分。
float的属性值有：left（左浮动）/right（右浮动）/none（元素不设置浮动）。浮动，从字面意思来说就是让元素浮起来，浮起来后到了另一个层面，直到它的外边缘碰到包含框或另一个浮动框的边框为止。添加了浮动属性的元素不占位置，后边的元素会把之前的位置补上去（因为后面的元素还在之前那层，前面空了，便补上去）。
可以理解为排队等电梯：一排人竖直排着队准备去上班，第一个人上了电梯即添加浮动，去了别的楼层，便不占位置。第二个人便站到第一个人刚刚排队的位置上，后面的人紧随其后，一个接一个补上去。注意此时没上电梯排队的人依然一个接一个竖直排队。而上了电梯的人他们在一层，他们便可以左右并列显示，但依旧按照“上电梯”的顺序。所以不需要考虑其他层的人，只看自己层的前面是否有人占位置。
当n个元素添加了左浮动，他们都浮起来在一个层面，便开始“左右排列”显示。浮动后排版的顺序与HTML中标签书写顺序有关。如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动元素便向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
（右浮动同理）以两个元素为例
（1）未添加float浮动属性时，两个元素自上而下显示，在一个层面，假设均在x层

（2）给第一个元素添加浮动之后(例如左浮动)float：left; 第一个元素浮起来，第二个元素补到之前第一个元素的位置。出现该效果因为背景色为粉色的元素浮在背景色为绿色的元素上面。此时小粉在y层，大绿依旧在x层。

（3）给两个元素都添加浮动之后，小粉和大绿都在y层，小粉先写，小粉就在大绿左面（前面）显示，两个元素自左向右并列显示在y层。以此类推n个元素的情况。

三、浮动的作用：
文字环绕、图文应用，创建全部网页布局等…
如果出现文字环绕效果，即采取第一个元素浮动，第二个元素不浮动，将文字设置在第二个元素上。

（ps；可以理解为，文字夹在两层之间，遇到之前有浮动的元素便挡住了去路）
如果改变将浮动的小粉大小改变，盒子里的文字也将自动调整位置。

如果将小粉换为图片，并且设置浮动，随着图片的变化，周围文字的位置也随之改变。

四、特殊小情况：
1.添加浮动之后的对属性margin： 0 auto ；不生效。
2.块状元素设浮动，宽度随内容而变化，一旦超出最大宽度，以最大宽度显示。
其他情况还有待学习继续添加