首先，感谢廿四桥明月夜
我在他转载的文章的基础上自己做了总结和理解，虽然不知道原创是谁，但是灰常的感谢，帮助我们这些前端小白。
话不多说进入正题：
1.首先什么是浮动：举一个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style>
*{
padding: 0;
margin: 0;
}
.topDiv {
background:yellow;
width: 500px;
}
.floatDiv {
width: 100px;
height: 100px;
background-color: red;
color: #fff;
float: left;
}
.otherDiv {
background-color: blue;
color: #fff;
}
.bottomDiv {
width: 500px;
height: 100px;
background-color: black;
color: #fff;
}
</style>
</head>
<body>
<div class="topDiv">
<div class="floatDiv">floatDiv</div>
<div class="otherDiv">otherDiv</div>
</div>
<div class="bottomDiv">bottomDiv</div>
</body>
</html>在浏览器中的效果为：此时topDiv的高度等于otherDiv的高度
出现了以下问题：
1.浮动元素排版超出了其父级元素（.topDiv），父元素的高度出现了塌缩，若没有文字高度的支撑，不考虑边框，父级元素高度会塌缩成零。
2.浮动元素甚至影响到了其父元素的兄弟元素（.bottomDiv）排版。因为浮动元素脱离了文档流，.bottomDiv在计算元素位置的时候会忽略其影响，紧接着上一个元素的位置继续排列。
解决问题的思路：
1.解决第一个问题，需要清除.otherDiv周围的浮动；
2.而解决第二个问题，因为父元素的兄弟元素位置只受父元素位置的影响，就需要一种方法将父级元素的高度撑起来，将浮动元素包裹在其中，避免浮动元素影响父元素外部的元素排列。
下面就来阐述一下具体的解决方法：
方法1.利用clear清除：此处需要注意的是吧clear加在了哪一个div上
.otherDiv {
background-color: blue;
color: #fff;
clear:left; /*此处是关键*/
}
此时的父级div(.topDiv)的高度就是两个子元素(.floatDiv .otherDiv)的高度之和，此次的父级div的高度就被撑起来了，而且bottomDiv的排版也正常了，在topDiv的下方， 解释原理的话就是因为.otherDiv的周围不允许有左浮动的div，所以.otherDiv就居左了，也可以使用clear：both清除他旁边的所有的浮动元素。
补充：若将两个子级div调换一下位置
<div class="topDiv">
<div class="otherDiv">otherDiv</div>
<div class="floatDiv">floatDiv</div>
</div>
<div class="bottomDiv">bottomDiv</div>得到效果：此时.topDiv的高度和.otherDiv的高度一致
可以看出，.otherDiv的位置首先确定了， 然后浮动元素接着在其下面，所以父级的div高度并没有包含浮动的子div（.floatDiv）的高度。
方法2：父元素内部的最后插入清除浮动的块级元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style>
*{
padding: 0;
margin: 0;
}
.topDiv {
background:yellow;
width: 500px;
}
.floatDiv {
width: 100px;
height: 100px;
background-color: red;
color: #fff;
float: left;
}
.otherDiv {
background-color: blue;
color: #fff;
/*clear:left;*/
}
.bottomDiv {
width: 500px;
height: 100px;
background-color: black;
color: #fff;
}
.blankDiv{
clear: left;
} /*关键点，区别所在*/
</style>
</head>
<body>
<div class="topDiv">
<div class="floatDiv">floatDiv</div>
<div class="otherDiv">otherDiv</div>
<div class="blankDiv"></div>
</div>
<div class="bottomDiv">bottomDiv</div>
</body>
</html>
这个 方法的区别是在topDiv内部的最后一个子div后面加上了一个空的div(.blankDiv)，作用就是清除其周围的浮动，使父div的高度被撑起来，此时父div(黄色的div)的高度就是两个子div高度的相加，其实这个原理和第一个是一样的。
3.利用伪元素（clearfix）：
<style>/*此处只写了区别之处*/
.clearfix:after {
content: '.';
height: 0;
display: block;
clear: both;
}
</style>
<body>
<div class="topDiv clearfix">/*区别之处*/
<div class="floatDiv">floatDiv</div>
<div class="otherDiv">otherDiv</div>
</div>
<div class="bottomDiv">bottomDiv</div>
</body>
该样式在clearfix，即父级元素的最后，添加了一个:after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的。注意到该伪元素的display值为block，即，它是一个不可见的块级元素（有的地方使用table，因为table也是一个块级元素）。你可能已经意识到，这也只不过是前一种清除浮动方法（添加空白div）的另一种变形，其底层逻辑也是完全一样的。前面的三种方法，其本质上是一样的。
4. 利用overflow清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style>
*{
padding: 0;
margin: 0;
}
.topDiv {
background:yellow;
width: 500px;
overflow: auto; /*区别就在这里*/
}
.floatDiv {
width: 100px;
height: 100px;
background-color: red;
color: #fff;
float: left;
}
.otherDiv {
background-color: blue;
color: #fff;
}
.bottomDiv {
width: 500px;
height: 100px;
background-color: black;
color: #fff;
}
</style>
</head>
<body>
<div class="topDiv">
<div class="floatDiv">floatDiv</div>
<div class="otherDiv">otherDiv</div>
</div>
<div class="bottomDiv">bottomDiv</div>
</body>
</html>
仅仅只在父级元素上添加了一个值为auto的overflow属性，父元素的高度立即被撑起，将浮动元素包裹在内。看起来，浮动被清除了，浮动不再会影响到后续元素的渲染（严格讲，这和清除浮动没有一点关系，因为不存在哪个元素的浮动被清除，不纠结这个问题）。其实，这里的overflow值，还可以是除了"visible"之外的任何有效值，它们都能达到撑起父元素高度，清除浮动的目的。不过，有的值可能会带来副作用，比如，scroll值会导致滚动条始终可见，hidden会使得超出边框部分不可见等。
最后还是感谢开篇提到的人给了我这个问题解决的方案。
如果有什么问题大家可以一起交流哦！