今天給你們分享的是清除浮動的具體代碼實現，主要是幫助你們理解哪種清除浮動比較好，辨析它們的優缺點而已。清除浮動有不少種，如何進行選擇清除浮動呢？E良師益友網就拿下面的一個例子來說解。css
實例代碼（未清除浮動）：html
<!doctype html>佈局
<html>學習
<head>spa
<meta charset="UTF-8">orm
<title>清除浮動方法大全</title>htm
<link rel="stylesheet" href="reset.css">開發
<style>文檔
.main div {it
float: left;
width: 200px;
height: 200px;
margin-right: 20px;
background: #fcf;
}
.footer {
width: 420px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main">
<div>清除浮動方法大全</div>
<div>html學習</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
解析：頁面開發的時候能夠爲父級標籤添加固定高度，可是有時但願內容可以撐開高度（好比內容不固定的時候）。對於不浮動的元素來講，它們是可以撐開外部div的高度的，可是一旦浮動，元素脫離文檔流，父級div就至關於沒有了內容（上面的例子中類名爲main的高度爲0了）。這時是沒有辦法實現內容撐開高度的。此時須要進行清除浮動對佈局形成的一系列影響，因此叫清浮動。（不要誤解成把浮動清除了，元素就沒有浮動了，不是同一律念）。
下面E良師益友網就爲你們分析總結一下清除浮動的方法！
一：空標籤清浮動
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮動方法大全</title>
<link rel="stylesheet" href="reset.css">
<style>
.main div {
float: left;
width: 200px;
height: 200px;
margin-right: 20px;
background: #fcf;
}
.footer {
width: 420px;
height: 100px;
background: red;
}
.clear {
clear: both;
/*消除默認行高的影響*/
height: 0;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main">
<div>清除浮動方法大全</div>
<div>html學習</div>
<p class="clear"></p>
</div>
<div class="footer"></div>
</div>
</body>
</html>
註釋：上面用p標籤進行空標籤清浮動，固然能夠用別的標籤；若是用行元素的話須要進行轉化爲塊，塊元素就沒有必要轉化啦。
二：br標籤清除浮動
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮動方法大全</title>
<link rel="stylesheet" href="reset.css">
<style>
.main div {
float: left;
width: 200px;
height: 200px;
margin-right: 20px;
background: #fcf;
}
.footer {
width: 420px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main">
<div>清除浮動方法大全</div>
<div>html學習</div>
<!-- br標籤自帶的屬性 -->
<br clear="all" />
</div>
<div class="footer"></div>
</div>
</body>
</html>
三：父元素設置overflow：hidden
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮動方法大全</title>
<link rel="stylesheet" href="reset.css">
<style>
.main {
overflow: hidden;
}
.main div {
float: left;
width: 200px;
height: 200px;
margin-right: 20px;
background: #fcf;
}
.footer {
width: 420px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main">
<div>清除浮動方法大全</div>
<div>html學習</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
四：父元素設置overflow：auto
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮動方法大全</title>
<link rel="stylesheet" href="reset.css">
<style>
.main {
overflow: auto;
}
.main div {
float: left;
width: 200px;
height: 200px;
margin-right: 20px;
background: #fcf;
}
.footer {
width: 420px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main">
<div>清除浮動方法大全</div>
<div>html學習</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
五：父元素浮動
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮動方法大全</title>
<link rel="stylesheet" href="reset.css">
<style>
.main {
float: left;
}
.main div {
float: left;
width: 200px;
height: 200px;
margin-right: 20px;
background: #fcf;
}
.footer {
width: 420px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main">
<div>清除浮動方法大全</div>
<div>html學習</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
註釋：使得與父元素相鄰的元素的佈局會受到影響（影響到了類名爲footer的元素）。
六：父元素設置display：table
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮動方法大全</title>
<link rel="stylesheet" href="reset.css">
<style>
.main {
display: table;
}
.main div {
float: left;
width: 200px;
height: 200px;
margin-right: 20px;
background: #fcf;
}
.footer {
width: 420px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main">
<div>清除浮動方法大全</div>
<div>html學習</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
七：after 僞元素（不是僞類）
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮動方法大全</title>
<link rel="stylesheet" href="reset.css">
<style>
.main div {
float: left;
width: 200px;
height: 200px;
margin-right: 20px;
background: #fcf;
}
.footer {
width: 420px;
height: 100px;
background: red;
}
.clearfix:after {
clear:both;
display:block;
height:0;
content:"\200B";
}
.clearfix {
*zoom:1;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main clearfix">
<div>清除浮動方法大全</div>
<div>html學習</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
以上就是全部清除浮動的方法啦，至於具體用哪一種方法，那就由你來定奪了！
