持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第16天，点击查看活动详情
Float特性
- Float元素会脱离标准流
- Float元素会一行内显示并且元素顶部对齐
- Float元素会具有行内块元素的特性
特性1: 脱离标准流
设置了浮动的元素呢，会漂浮在普通流上面，脱离标准普通流的控制且不占位置；移动到指定位置，浮动的盒子不再保留原先的位置
<style>
//脱离标准普通流的控制，直至移动到指定位置
//浮动的盒子不再保留原先的位置
.box1 {
float: left;
width: 20px;
height: 20px;
background-color: black;
}
.box2 {
width: 30px;
height: 30px;
background-color: gray;
}
</style>
特性2:一行内显示并顶部对齐
若设置了多个盒子浮动，会按照属性值在同行内显示并按顶端对齐排列
还会无缝隙贴合在一起，若顶级宽度放不下，多余的盒子会换行对齐
动态效果可以参考大神文中例子！指路：特性-浮动元素一行显示
特性3: 行内块元素的特性
- 盒子间无缝隙
- 宽度大小根据内容决定
- 高度大小可以直接设置
<style>
//任何元素都可以浮动，添加浮动之后具有行内块元素相似的特性
span,
div {
float: left;
width: 20px;
height: 10px;
background-color:black;
}
// 如果行内元素有了浮动，行内块元素就可以直接给高度和宽度
p {
float: right;
height: 20px;
background-color: gray;
}
</style>
一般搭配使用？
- 先用标准流的父元素排列上下位置
- 内部子元素采取浮动排列左右位置
例如：（参考大神链接）
写在最后
重新开始更文啦！最近忙了一段时间，终于继续可以学习！感谢大家的支持！我会继续努力坚持学习！养成了好习惯，每天必定会抽出时间多多少少学习前端知识～
以上习题&笔记从大佬们的论坛学习而来，特感谢大佬们的知识分享～ （学习技术知识，果然要看大佬们的技术博客，大家有好的推荐也欢迎指引我这个小白哈，感恩！）
附上学习链接，感谢这些大佬出题和解答：
