在html中，浮動可以說是比較常用的。在頁面的布局中他有着很大的作用，但是浮動中存在的問題也是比較多的。現在我們簡單說一下怎么去除浮動
首先我們先簡單的看一下浮動:
首先我們先創建一個簡單的div，並在其中再放兩個div，並且給他們不同的樣式。
css樣式代碼：
#div1{background: medium purple;}
#left{width: 200px;height: 100px;background: sky-blue;}
#right{width: 250px;height: 150px;background: pink;}
html代碼：
<div id="div1"> <div id="left"></div> <div id= "right"></div> </div>
效果圖：
這就是最開始我們我們最開始的結構和樣式，現在我們給左上方藍色的div一個向左浮動(float.left)看看有什么變化。
css代碼：
#left{width: 200px;height: 100px;background: skyblue;float:left;}
效果圖：
在這次的效果圖上大家可以看到，粉色的div跑到了藍色div的下面，而且紫色的div的寬度變成了和粉色div一樣的寬度了，所以說在元素浮動后久不會再占據文檔流了。它的寬度在沒有定義的情況下，由自己的內容撐開。此時我們在給粉色的div一個左浮動看一下有什么變化。
css代碼：
#right{width: 250px;height: 150px;background: pink;float:left;}
效果圖：
大家會發現紫色的div已經完全消失了。而藍色的div和粉色的div出現在了同一行。所以說在元素進行了浮動后默認是出現在同一行，而且浮動元素的位置是到父級的邊界或者是遇到另外一個浮動元素才會停止。很多然會問，我們並不想讓紫色的div消失怎么辦？這就是我們今天要說的去除浮動的方法。
方法一：(給父級元素寬度和高度)
由於浮動元素不占據文檔流，所以說紫色div是由於沒有內容撐開高度才消失的，而不是不存在了。所以方法一就是我們給紫色div高度和寬度也就是給浮動元素的父級高度和寬度，從而讓它自己撐開寬高，從而進行顯示。
css代碼：
#div1{width:600px;height:300px;background: medium purple;}
#left{width: 200px;height: 100px;background: sky-blue;}
#right{width: 250px;height: 150px;background: pink;}
效果圖：
方法二：父級元素加上overflow：hidden
很多人會說我們不想給紫色div固定的寬高，想讓它的內容將它撐開。那么我們就可以在父級元素上也就是紫色div的css中加上overflow：hidden。從而讓紫色div顯示出來了。
css代碼：
#div1{background: medium purple;overflow:hidden}
效果圖
：
方法三：給兄弟元素加一個clear：both
除了對父級進行改變，我們也可以對子元素的兄弟元素進行改動，從而達到去除浮動的效果。
html代碼：
<div id="div1"> <div id="left"></div> <div id= "right"></div> <div id="div2"></div> </div>
效果圖：
方法四:利用偽類去除浮動
用偽類清除浮動時用after，並且加上content：""可以加內容也可以不加，但是一定要加上display：block；同時還要寫clear：both；
css代碼：
#div1:after{content:"";clear: both;display: block;}
效果圖：
以上就是一些清除浮動的方法，希望可以幫助到大家。