在了解如何清除浮動之前，我們先了解一下為什麼我們要對元素進行浮動。我們都知道，div作為乙個塊標籤來說，它是獨佔一行，從上而下排列的，這就是所謂的標準流。但是，在實際應用中，我們有時需要將兩個或者多個div在一行顯示，這時，我們就要對元素進行浮動已達到這個結果。浮動之後的元素已經脫離了文件流，漂浮於文件流之上。下面我們先來看一標準流是什麼情況？
上面所描述的就是標準流，當我們沒有給父級也就是box高度時，它的高度是由裡面的內容，也就是裡面的div塊的高度撐起來的，而兩個div塊也是按照上面我們所提到的獨佔一行，自上而下排列的下面我們再來看一下，當我們對div塊進行浮動之後，會出現什麼情況。此時我們只需要給div1和div2加浮動，
從上面結果我們可以看出，兩個div塊佔據了同一行，而且，它們已經撐不起來父級（原來的黑色區域）的高度了。這就說明它們脫離了我們的文件流，已經不佔據頁面空間了。需要注意的是浮動只能是左右浮動。
第二，事物總是雙面的，浮動雖然給我們帶來了一定的方便，但也給我們造成了一定的影響，浮動元素相當於給元素增加了乙個inline-block（行內塊標籤），行元素浮動之後相當於給它轉化成了塊元素，此時可以給它設定寬度和高度；浮動元素脫離了我們的文件流，不再佔據頁面的高度；那麼我們如何讓才能消除浮動帶來的影響呢，下面我們就來介紹一下清除浮動的幾種常見的方法。
第一種方法：
給父級元素增加高度
.box第二種方法：當父級容器的高度不能確定時，我們可以給父級新增overflow:hidden;
.box第三種方法：給浮動元素新增乙個空的兄弟元素，然後給它新增clear:both;
第四種方法：利用偽類 :after 清除浮動。
doctype html再利用偽類清除浮動的時候我們需要注意幾個問題，>
<
html
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>
title
>
head
>
<
style
type
="text/css"
>
*.box
.div1
.div2
.box:after
style
>
<
body
>
<
div
class
="box"
>
<
div
class
="div1"
>
div>
<
div
class
="div2"
>
div>
div>
body
>
html
>
首先，我們是要給浮動元素的父級新增 :after
其次，一定要有content屬性，即使內容為空，
最後，轉化為塊元素。display:block;
清除浮動之後的效果如下：
上述幾種方法都是可以實現這種效果的哦！
關於清除浮動
一 為什麼要浮動 我個人認為是為了頁面的美觀，方便布局，但是浮動是把雙刃劍，有利也有弊 二 什麼時候需要清除浮動 很多種原因。1.如果父元素沒有設定高度，而子級元素設定了浮動，這樣會導致父元素高度的坍塌。2.導致背景不能顯示，如果對父級設定了背景屬性，導致父級不能撐開，會影響到背景不能正常開啟。3....
關於清除浮動
一，為什麼要清除浮動 doctype html html head lang en meta charset utf 8 title clearfix title style div div1 div2 style head body div class div1 div class div2 di...
關於浮動與清除浮動
當給乙個子元素設定浮動屬性時，這個子元素就脫離了文件流，從形式上不再屬於父元素，因此它的父元素的高度就會受到影響，內容不被撐開，為了清除子元素浮動帶來的負面影響，可以有以下方法解決 1,給直接父元素設定inline block或float屬性 不推薦 2,在浮動的子元素後面加上br標籤並設定clea...