html中如何清除浮動

在html中，浮動可以說是比較常用的。在頁面的布局中他有著很大的作用，但是浮動中存在的問題也是比較多的。現在我們簡單說一下怎麼去除浮動

首先我們先簡單的看一下浮動:

首先我們先建立乙個簡單的div，並在其中再放兩個div，並且給他們不同的樣式。

css樣式**：

#div1

#left

#right

html**：

效果圖：

這就是最開始我們我們最開始的結構和樣式，現在我們給左上方藍色的div乙個向左浮動(float.left)看看有什麼變化。

css**：

#left

效果圖：

在這次的效果圖上大家可以看到，粉色的div跑到了藍色div的下面，而且紫色的div的寬度變成了和粉色div一樣的寬度了，所以說在元素浮動後久不會再佔據文件流了。它的寬度在沒有定義的情況下，由自己的內容撐開。此時我們在給粉色的div乙個左浮動看一下有什麼變化。

css**：

#right

效果圖：

大家會發現紫色的div已經完全消失了。而藍色的div和粉色的div出現在了同一行。所以說在元素進行了浮動後預設是出現在同一行，而且浮動元素的位置是到父級的邊界或者是遇到另外乙個浮動元素才會停止。很多然會問，我們並不想讓紫色的div消失怎麼辦？這就是我們今天要說的去除浮動的方法。

方法一：(給父級元素寬度和高度)

由於浮動元素不佔據文件流，所以說紫色div是由於沒有內容撐開高度才消失的，而不是不存在了。所以方法一就是我們給紫色div高度和寬度也就是給浮動元素的父級高度和寬度，從而讓它自己撐開寬高，從而進行顯示。

css**：

#div1

#left

#right

效果圖：

方法二：父級元素加上overflow：hidden

很多人會說我們不想給紫色div固定的寬高，想讓它的內容將它撐開。那麼我們就可以在父級元素上也就是紫色div的css中加上overflow：hidden。從而讓紫色div顯示出來了。

css**：

#div1

效果圖：

方法三：給兄弟元素加乙個clear：both

除了對父級進行改變，我們也可以對子元素的兄弟元素進行改動，從而達到去除浮動的效果。

html**：

效果圖：

方法四:利用偽類去除浮動

用偽類清除浮動時用after，並且加上content：""可以加內容也可以不加，但是一定要加上display：block；同時還要寫clear：both；

css**：

#div1:after

效果圖：

以上就是一些清除浮動的方法，希望可以幫助到大家。