清除浮動有哪些方法及優缺點
- 一个新手原創
- 2017-09-23 10:23:132168瀏覽
為什麼要清除浮動？
下面的範例是浮動對元素的影響
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<style type="text/css">
.box1 {
width: 100px;
background: #999;
}
.box2 {
width: 100px;
height: 40px;
}
.box3 {
width: 100px;
height: 40px;
background-color: #333;
}
</style></head><body>
<p class="box1">
<p class="box2"></p>
</p>
<p class="box3"></p></body></html>box2加入float: left屬性後的結果如下
如圖所示，由於box1未設定高度，box3自動補位，如果這樣的話，頁面就會混亂。所以，我們需要清除這種浮動
以下是清除浮動的幾種方法
（1）clear: both
透過在浮動元素下方新增p標籤並設置clear: both屬性
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<style type="text/css">
.box1 {
width: 100px;
background: #999;
}
.clear {
clear: both;
}
.box2 {
width: 100px;
height: 40px;
float: left;
}
.box3 {
width: 100px;
height: 40px;
background-color: #333;
}
</style></head><body>
<p class="box1">
<p class="box2"></p>
<p class="clear"></p>
</p>
<p class="box3"></p></body></html>優點：簡單、程式碼少、瀏覽器支援好
缺點：增加了無意義的標籤
（2）overflow: hidden
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<style type="text/css">
.box1 {
width: 100px;
background: #999;
}
.clear {
overflow: hidden;
zoom: 1; /*处理兼容性问题*/
}
.box2 {
width: 100px;
height: 40px;
float: left;
}
.box3 {
width: 100px;
height: 40px;
background-color: #333;
}
</style></head><body>
<p class="box1 clear">
<p class="box2"></p>
</p>
<p class="box3"></p></body></html>###優點： 簡單、程式碼少、瀏覽器支援好###缺點：超出的內容會被隱藏###### #（3）加入after偽類###<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<style type="text/css">
.box1 {
width: 100px;
background: #999;
}
.clear:after {
clear: both;
content: "";
display: block;
visibility: hidden;
}
.box2 {
width: 100px;
height: 40px;
float: left;
}
.box3 {
width: 100px;
height: 40px;
background-color: #333;
}
</style></head><body>
<p class="box1 clear">
<p class="box2"></p>
</p>
<p class="box3"></p></body></html>###優點：瀏覽器支援好###缺點：程式碼多######第三種方法是現在許多瀏覽器所使用的方法，所以清除浮動時最好用after偽類###以上是清除浮動有哪些方法及優缺點的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn