css怎麼清除浮動

標籤：實現   isp   代碼   注釋   協助   display   內容   foo   設定   

　　大家都知道，浮動會對文檔產生影響，具體來看看會對文檔產生什麼影響?

　　解析：頁面開發的時候可以為父級標籤添加固定高度，但是有時希望內容能夠撐開高度(比如內容不固定的時候)。對於不浮動的元素來說，它們是能夠撐開外部div的高度的，但是一旦浮動，元素脫離文檔流，父級div就相當於沒有了內容(上面的例子中類名為main的高度為0了)。這時是沒有辦法實現內容撐開高度的。此時需要進行清除浮動對布局造成的一系列影響，所以叫清浮動。(不要誤解成把浮動清除了，元素就沒有浮動了，不是同一概念)。

　　清除浮動有很多種，如何進行選擇清除浮動了?以下是清浮動的具體代碼實現，主要是協助大家理解哪一種清除浮動比較好，辨析它們的優缺點而已。

　　一：空標籤清浮動(如下代碼)

　　個人部落格

　　個人網站

　　注釋：上面用p標籤進行空標籤清浮動，當然可以用別的標籤;如果用行元素的話需要進行轉化為塊，塊元素就沒有必要轉化啦。

　　二：br標籤清除浮動(如下代碼)

　　個人部落格

　　個人網站

　　三：父元素設定overflow：hidden (如下代碼)

　　個人部落格

　　個人網站

　　四：父元素設定overflow：auto (如下代碼)

　　個人部落格

　　個人網站

　　五：父元素浮動

　　個人部落格

　　個人網站

　　效果：

　　注釋：使得與父元素相鄰的元素的布局會受到影響(影響到了類名為footer的元素)。

　　六：父元素設定display：table

　　個人部落格

　　個人網站

　　七：after 虛擬元素(不是偽類)

　　個人部落格

　　個人網站

css怎麼清除浮動