清除浮動的七種方式方法（例項程式碼講解）
今天給大家分享的是清除浮動的具體程式碼實現，主要是幫助大家理解哪一種清除浮動比較好，辨析它們的優缺點而已。清除浮動有很多種，如何進行選擇清除浮動呢？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;
}
</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>
以上就是所有清除浮動的方法啦，至於具體用哪種方法，那就由你來定奪了！