内容来是作者学习尚硅谷浮动的相关视频所做笔记，希望能帮助大家，欢迎补充。
前言
在某一天，小范忘记了flex布局的使用方法，却想三个盒子并排在同一行，于是他找到了浮动。
浮动
可以使浮动的框向左或向右移动，直到它的边缘碰到包含框或者另一个浮动框的边框为止。
浮动的作用：
可以是一个元素向其父元素的左侧或者右侧移动
浮动的属性：
float：
可选值：none，默认值，元素不移动
left，元素向左移动
right，元素向右移动
浮动的主要特点
1.浮动的元素会完全脱离文档流，导致该元素下面的元素会自动向上排列。
2.并且脱离文档流的块元素，会具有行内块元素的性质。行内元素脱离文档流以后也会具有行内块元素的性质
以下是同样打开开发者工具对盒模型选取的对比：
浮动前：占据一整行
浮动后：只占据自身盒子大小
3.浮动元素向左或向右移动时，不会超过其他浮动的元素
4.浮动元素不会影响比它早设置（HTML里的顺序）的浮动元素，反而会被其影响。
5.设置浮动后，浮动元素会向父元素的左侧或右侧移动，且不会移出父元素
6.如果浮动元素上边是一个没有浮动的块元素，则浮动元素无法上移
脱离文档流的简易解释：一群兄弟div很有秩序的在饭堂（父元素）排好了一列队伍打饭，然后最前面的人打好饭了，他走了，后面的div就都往前走了一个位置。这时，走的那个人就叫做脱离文档流，它可以在饭堂内任意移动。但是如果这是二号div不想排了，那么他只能在一号之后活动，不能超过一号，后面同理。
好了，到此，小范的目的可以达到了。
但他还发现了浮动更加有趣有用的地方：
浮动的其他特点：浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围
这不就是我们经常在网上看到的像新闻那样的布局吗！？
原来这些页面是这样设计的，长芝士了。
高度塌陷
但是浮动也会导致一些缺点，比如高度塌陷的问题。
在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离，将会无法称其父元素的高度，导致父元素高度丢失。
比如我们设置父元素高度为auto，我们想让子元素撑开他，在我们子元素不浮动时，会是这样：
而如果我们子元素浮动后，则会出现这样的场景：子元素跑出来了，导致父元素高度丢失，边框之内没有元素了，不会给撑开。
高度塌陷是常见的问题，但为了不让布局混乱，所以我们必须要解决：
高度塌陷解决办法：
1.高度写死（但不能满足随子元素变化
2.BFC
BFC是CSS中一个隐含的属性，可以为一个元素开启BFC 开启BFC的元素会变成一个独立的布局区域。
-开启BFC后的特点：
1.开启BFC的元素不会被浮动元素覆盖
2.开启BFC的元素子元素和父元素外边距不会重叠
3.开启BFC的元素可以包含浮动的子元素
开启BFC的方法：
1.设置元素的浮动
2.将元素设置为行内块元素
前面两种都不推荐，副作用比较大
3.将元素的overflow设置为一个非visible的值
-常用方式： 为元素设置overflow：hidden 开启其BFC，以使其可以包含浮动元素
4.clear属性
-作用清除浮动元素对当前元素所产生的影响
-可选值：
left 清除左侧浮动元素对当前元素的影响
right 清除右侧浮动元素对当前元素的影响
both 清除两侧中最大影响的那侧
原理：
设置清除浮动后，浏览器会自动为元素添加一个上外边距，消除影响。
如果没有其他内容
可以通过伪类after来设置clear：both撑起父元素高度
最佳办法clearfix
这个样式可以同时解决高度塌陷和外边距重叠的问题
示例：
/*CSS*/
<style>
.box1{
height: auto;
border:5px solid red;
}
.box2{
background-color: #bfa;
width: 200px;
height: 200px;
float: left;
}
.clearfix::before,
.clearfix::after{
content: '';
display: table;/*解决外边距折叠同时设置元素*/
clear: both;/*解决高度塌陷*/
}
</style>
<!--HTML-->
<body>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
好了，学会了float属性，可以去完成一些简单的页面布局了，还学会了解决高度塌陷的问题，真不错呢。