溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
CSS基礎之清除浮動
本人前端菜鳥一枚，在學習 CSS 過程中發現網上流傳的教程參差不齊，要么內容不夠詳細，要么方法就是錯的。本文是在我參考了許多前輩經驗的基礎上編寫的，如有錯誤的地方，請各位大牛不吝賜教。以下是我總結的三種行之有效而且比較簡單實用的方法。
一、父級div定義偽類 :after
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS基礎之清除浮動</title>
<style>
*{
margin:0;
padding: 0;
}
#header,#footer{
width: 100%;
height: 50px;
background: #3ac;
}
.father{
margin: 10px auto;
}
.float_left{
float: left;
background: #a3f;
width: 70%;
height: 450px;
}
.float_right{
float: right;
background: #f3f;
width: 30%;
height: 300px;
}
.father:after{
display: block;
content: "";
clear: both;
}
</style>
</head>
<body>
<div id="header">頭部</div>
<div class="father">
<div class="float_left">left</div>
<div class="float_right">right</div>
</div>
<div id="footer">底部</div>
</body>
</html>其中關鍵的部分為：
.father:after{
display: block;
content: "";
clear: both;
}這里 content 的值盡量寫為空或者不寫，如果寫其他值，則需添加多余的代碼，舉例如下：
.father:after{
display: block;
height: 0;
visibility: hidden;
content: "清除浮動";
clear: both;
}雖然也能清除浮動，但多了一些不必要的代碼。
二、在結尾處添加空的div標簽
原理跟使用 :after 偽類一樣，都是通過 clear: both; 來實現的。示例代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS基礎之清除浮動</title>
<style>
*{
margin:0;
padding: 0;
}
#header,#footer{
width: 100%;
height: 50px;
background: #3ac;
}
.father{
margin: 10px auto;
}
.float_left{
float: left;
background: #a3f;
width: 70%;
height: 450px;
}
.float_right{
float: right;
background: #f3f;
width: 30%;
height: 300px;
}
.clr{
display: block;
content: "";
clear: both;
}
</style>
</head>
<body>
<div id="header">頭部</div>
<div class="father">
<div class="float_left">left</div>
<div class="float_right">right</div>
<div class="clr"></div>
</div>
<div id="footer">底部</div>
</body>
</html>三、父元素定義 overflow：auto;
HTML結構跟上面一樣，CSS樣式部分如下：
*{
margin:0;
padding: 0;
}
#header,#footer{
width: 100%;
height: 50px;
background: #3ac;
}
.father{
margin: 10px auto;
overflow: auto;
}
.float_left{
float: left;
background: #a3f;
width: 70%;
height: 450px;
}
.float_right{
float: right;
background: #f3f;
width: 30%;
height: 300px;
}這種方法使用起來很簡單，但具有一定的局限性。內部寬高超過父級div時，會出現滾動條。
以上就是清除浮動的三種方法。另外如果父元素本身也是浮動的話，則父元素內就無需清除浮動。要根據實際情況選擇可行的方法。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
