對於浮動和清除浮動的理解
我在他轉載的文章的基礎上自己做了總結和理解，雖然不知道原創是誰，但是灰常的感謝，幫助我們這些前端小白。
話不多說進入正題：
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會使得超出邊框部分不可見等。
最後還是感謝開篇提到的人給了我這個問題解決的方案。
如果有什麼問題大家可以一起交流哦！