持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第16天，点击查看活动详情
1.浮动规则一
元素一旦浮动后,脱离标准流
朝着向左或向右方向移动，直到自己的边界紧贴着包含块(一般是父元素）或者其他浮动元素的边界为止
定位元素会层叠在浮动元素上面
2.浮动规则二
如果元素是向左(右)浮动，浮动元素的左(右)边界不能超出包含块的左(右)边界
3.浮动规则三
规则三:浮动元素之间不能层叠
如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素（左浮找左浮，右浮找右浮)
如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止
4.浮动规则四
浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出
比如行内级元素、inline-block元素、块级元素的文字内容
6.浮动规则五
规则五:行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐
二、多个行内级元素中间空格产生原因及去除
原因：
在浏览器中，浏览器会将换行符转换成空格输出，所以产生间隙。
将多个行内级元素中间的空格(间隙)去除的方法：
1.·删除换行符(不推荐)
2.·将父级元素的font-size设置为0，但是需要子元素设置回来
3．通过子元素(span)统一向一个方向浮动即可
- flex布局(还没有学习)
三、浮动的问题-高度塌陷
由于浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度
父元素计算总高度时，就不会计算浮动子元素的高度、导致了高度坍塌的问题
解决父元素高度坍塌问题的过程，一般叫做清浮动（清理浮动、清除浮动)
清浮动的目的是
让父元素计算总高度的时候，把浮动子元素的高度算进去
如何清除浮动呢?使用clear属性
四、CSS属性- clear
clear属性是做什么的呢?
clear属性可以指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面;
clear的常用取值
left:要求元素的顶部低于之前生成的所有左浮动元素的底部
right:要求元素的顶部低于之前生成的所有右浮动元素的底部
both:要求元素的顶部低于之前生成的所有浮动元素的底部
none:默认值，无特殊要求
五、清除浮动的方法
事实上我们有很多方法可以清除浮动
方法一:给父元素设置固定高度
扩展性不好（不推荐)
方法二:在父元素最后增加一个空的块级子元素，并且让它设置clear: both
会增加很多无意义的空标签，维护麻烦
违反了结构与样式分离的原则(不推荐)
方法三:给父元素添加一个伪元素
推荐;
编写好后可以轻松实现清除浮动;
---伪元素清除浮动
给父元素增加::after伪元素
纯CSS样式解决，结构与样式分离(推荐)
.clear-fix::after{
content: "";
display: block;
clear: both;
/* 浏览器兼容性 */
visibility: hidden;
height: 0;
}
.clear-fix{
*zoom: 1; /* IE6/7兼容性 */
}
