css float属性作用和排布规则

#css 浮动（float）

css浮动float属性，指的是元素的排布方式。
假设我们在使用浏览器浏览网页的时候，如果网页上的内容单向排布，就会导致，偌大的浏览窗，就只能看到稀稀疏疏几个内容，浏览体验就很差，有效的把浏览窗口内容丰富化，就需要 用到浮动属性。
举例说明：
创建一个父div，尺寸400*400，给它个背景色；
在这个外部div内部，再创建4个子div，也同样设置尺寸和背景色,在浏览器上显示如图:
可以发现，在父div中，四个子div默认靠左边纵向排列，因为div属于块元素，块元素特立独行(霸道的狠)；谁也不服谁，于是就呈现在各自所在行中，就只有元素本身；
如果单独给第一个子div添加float属性(举例：属性值设置left)，浏览显示如图：

嘿，发现第一个子div后面的元素居然往上移动了，同理分别单独给其他子div添加，显示如图

凡是加了float属性的 子div，下面的其他div都会上移。float就好比一种“特权”，谁有，那它下面的其他元素都得“跟着”。
如果我们给多个子div设置float，那它们都有“特权”，这个时候，又该听谁的？看下浏览显示：
可以发现，拥有float属性的子div，横向排布了成了"拜把子?" 那么问题来了，谁排“老大”？
通过调换html中各个div的代码位置，发现，最先定义的div会排在最前面，讲究“先来后到”。万一多个div都设置float，一排排不开，就只好让“坐”咯（前排不易）。换排容易，无非就是坐后面，但是有什么要求呢？
给多个元素设置float属性后，一旦在固有设置的宽度下排不开，那么后续的元素会换位；

为了较好的说明排布，引入“参考线”（非真实存在）
逐步与前一个元素的底边界为“参考线”去排（参考线不能起伏，只能越来越低）
因为拥有float属性的元素，在没有额外设置其他改变位置的属性（比如position）
彼此***不能存在覆盖***，图中参考线就是保证元素间不会重叠覆盖。