為什麼要清除浮動？
下面的例子是浮動對元素的影響
lang="en">
charset="utf-8">
type="text/css">
.box1
.box2
.box3
style>
head>
class="box1">
class="box2">
p>
div>
class="box3">
div>
body>
html>
如圖所示，由於box1未設定高度，box3自動補位，如果這樣的話，頁面就會混亂。所以，我們需要清除這種浮動
以下是清除浮動的幾種方法
（1）clear: both
通過給浮動元素下新增div標籤並設定clear: both屬性
lang="en">
charset="utf-8">
type="text/css">
.box1
.clear
.box2
.box3
style>
head>
class="box1">
class="box2">
p>
class="clear">
div>
div>
class="box3">
div>
body>
html>
缺點：增加了無意義的標籤
（2）overflow: hidden
通過給浮動元素的父元素新增overflow: hidden屬性來清除浮動
lang="en">
charset="utf-8">
type="text/css">
.box1
.clear
.box2
.box3
style>
head>
class="box1 clear">
class="box2">
p>
div>
class="box3">
div>
body>
html>
缺點：超出的內容會被隱藏
（3）加入after偽類
lang="en">
charset="utf-8">
type="text/css">
.box1
.clear
:after
.box2
.box3
style>
head>
class="box1 clear">
class="box2">
p>
div>
class="box3">
div>
body>
html>
缺點：**多
第三種方法是現在許多瀏覽器所用的方法，所以清除浮動時最好用after偽類
（完）
清除浮動方法及優缺點
方法1 給父級div定義 高度 如下 我是左浮動 我是右浮動 我是div2 原理 通過設定父元素overflow值設定為hidden 在ie6中還需要觸發 haslayout zoom 1 優點 簡介，不存在結構和語義化問題 缺點 無法顯示需要溢位的元素 亦不太推薦使用 方法7父元素設定 overf...
CSS清除浮動的方法及優缺點
浮動是css布局裡面用的比較多的屬性。浮動的框向左或向右移動，直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。因為浮動會使當前元素產生向上浮的效果，所以浮動的元素會脫離正常的文件流，它包圍的內容在文件流中不佔空間。元素浮動會影響其他元素的布局，那麼浮動會帶來哪些影響呢？1.元素浮動後，父元素的背景...
CSS清除浮動方法及優缺點分析
一 什麼是浮動 通過設定元素的float值不為none，使得元素按照特定的方向脫離文件流，不佔據空間。浮動元素碰到包含它的父元素的邊框或者浮動元素的邊框停留。設定浮動後的行內元素，可以設定其寬和高。二 浮動帶來的問題 div1 div2 1.父元素的高度塌陷 2.浮動元素後面的同級非浮動元素會提高，...