1.爲什麼要清除浮動？
由於浮動元素不再佔用原文檔流的位置，所以它會對頁面中其他元素的排版產生影響，這時候就需要在該元素中清除浮動。
2.清除浮動的基本語法格式
在css中，clear屬性用於清除浮動，其基本語法格式如下：
選擇器｛
clear：屬性值；
｝
clear屬性常用的值：
|
屬性值 |
描述 |
|
left |
不允許左側有浮動元素（清除左側浮動的影響） |
|
right |
不允許右側有浮動元素（清除右側浮動的影響） |
|
both |
同時清除左右兩側浮動的影響 |
注意： clear屬性只能清除元素左右兩側浮動影響，但是在網頁製作經常會遇到一些特殊的浮動影響。例如對子元素設置浮動時，如果不對其父元素定義高度，則子元素的浮動會對父元素產生影響(高度塌陷）
3.常用四種清除浮動的方法：
方法一：使用空標記清除浮動（使用clear屬性來清除）
方法二：使用overflow屬性清除浮動
方法三：使用after僞對象清除浮動
方法四：浮動外部元素
（1）使用空標記清除浮動
（*1）解釋：
使用空標籤清除浮動。 我用了很久的一種方法，空標籤可以是div標籤，也可以是P標籤。這種方式是在需要清除浮動的父級元素內部的所有浮動元素後添加這樣一個標籤清除浮動，併爲其定義CSS代碼：clear:both。此方法的弊端在於增加了無意義的結構元素。
（*2）注意：
對於使用額外標籤清除浮動（閉合浮動元素），是W3C推薦的做法。至於使用<br />元素還是空<div></div>可以根據自己的喜好來選（當然你也可以使用其它塊級元素）。不過要注意的是，<br />本身是有表現的，它會多出一個換行出來，所以要設定它的heigh爲0，以隱藏它的表現。所以大多數情況下使用空<div>比較合適。
（*3）代碼案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
.clear{clear:both;}
</style>
<body>
<div id="layout">
<div id="left">Left</div>
<div id="right">Right</div>
<div class="clear"></div>
</div>
</body>
</html>
效果：
（2）使用overflow屬性清除浮動
（*1）解釋：
使用overflow屬性。 此方法有效地解決了通過空標籤元素清除浮動而不得不增加無意代碼的弊端。使用該方法是隻需在需要清除浮動的元素中定義CSS屬性：overflow:auto，即可！也可以用overflow:hidden；”zoom:1″用於兼容IE6，也可以用width:100%。
（*2）注意：
不過使用overflow的時候，可能會對頁面表現帶來影響，而且這種影響是不確定的，你最好是能在多個瀏覽器上測試你的頁面；
（*3）代碼案例
代碼：
<!DOCTYPE html>
<html>
<head>
<title>
清除浮動案例
</title>
<style type="text/css">
.simple{
width: 500px;
margin: 0 auto;
border: 1px solid blue;
}
.clearfix{
overflow: auto;
}
</style>
</head>
<body>
<div class="simple clearfix">
I am simple
<img src="Bqq1.png" alt="圖片">
</div>
</body>
</html>
效果：
（3）使用after僞對象清除浮動
（*1）解釋：
使用after僞對象清除浮動。 該方法只適用於非IE瀏覽器 。具體寫法可參照以下示例。使用中需注意以下幾點。一、該方法中必須爲需要清除浮動元素的僞對象中設置height:0，否則該元素會比實際高出若干像素；二、content屬性是必須的，但其值可以爲空，藍色理想討論該方法的時候content屬性的值設爲”.”，但我發現爲空亦是可以的。
（*2）代碼案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>after浮動</title>
<link rel="stylesheet" href="">
<style>
.pencil{
position:relative;
width:40px;
height:40px;
background-color:#000;
}
.pencil:after{
content:'';
display:block;
width:0;
height:0;
border-width:20px;
border-style:solid;
border-color:transparent transparent transparent #000; /*設置邊框三面爲透明顏色，一面爲黑色*/
position:absolute;
right:-40px;
}
</style>
</head>
<body>
<div class="pencil"></div>
</body>
</html>
效果：
注意事項：
（1）使用戶after僞對象清除浮動時的注意事項：
（*1） 必須爲需要清除浮動的元素僞對象設置“height:0;”樣式，否則該元素會比其實際高度高出若干像素。
（*2）必須在僞對象中設置content屬性，屬性值可以爲空，如“content: "";”。
（*3）案例代碼：
.father:after{ /*對類名爲father父元素應用after僞對象樣式*/
display:block;
clear:both;
content:"";
visibility:hidden;
height:0;
}
（4）浮動外部元素
（*1）解釋：
浮動外部元素，float-in-float。這種方法很簡單，就是把“#outer”元素也進行浮動（向左或者向右）。
但是這種方法帶來的別外一個問題就是和“#outer”相鄰的下一個元素會受到“#outer”的影響位置會產生變化，所以使用這種方法一定要小心。有選擇把頁面中的所有元素都浮動起來，最後使用一個適當的有意義的元素（比如頁腳）進行清理浮動，這有助於減少不必要的標記，但是過多的浮動會增加布局的難度。
（*2）代碼案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;float:left;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;
</style>
</head>
<body>
<div id="layout">
<div id="left">Left</div>
<div id="right">Right</div>
</div>
</body>
</html>
效果：
