清除浮動的方法：1、父級div定義height，語法「height:高度」；2、結尾處加空div並設定「clear:both」樣式；3、父級div定義偽類「:after」和zoom；4、父級div定義「overflow:hidden」。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
浮動會使目前標籤產生向上浮的效果，同時會影響到前後標籤、父級標籤的位置及 width height 屬性。
而且同樣的程式碼，在各種瀏覽器中顯示效果也有可能不相同，這樣讓清除浮動更難了。
解決浮動引起的問題有多種方法，但有些方法在瀏覽器相容性方面還有問題。
1、父級div定義 height
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
.div1{
background:#000080;
border:1px solid red;
/*解决代码*/
height:200px;
}
.div2{
background:#800080;
border:1px solid red;
height:100px;
margin-top:10px;
width:98%
}
.left{
float:left;
width:20%;
height:200px;
background:#DDD
}
.rightright{
float:rightright;
width:30%;
height:80px;
background:#DDD
}
</style>
</head>
<body>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">div2</div>
</body>
</html>登入後複製
原則：父級div手動定義height，就解決了父級div無法自動取得到高度的問題。
優點：簡單，程式碼少，容易掌握
缺點：只適合高度固定的佈局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題
2、結尾處加空div標籤 clear:both
<style type="text/css">
.div1{
background:#000080;
border:1px solid red
}
.div2{
background:#800080;
border:1px solid red;
height:100px;
margin-top:10px
}
.left{
float:left;
width:20%;
height:200px;
background:#DDD
}
.rightright{
float:rightright;
width:30%;
height:80px;
background:#DDD
}
/*清除浮动代码*/
.clearfloat{
clear:both
}
</style>登入後複製
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="clearfloat"></div>
</div>
<div class="div2">div2</div>登入後複製
原理：新增一個空div，利用css提高的clear:both清除浮動，讓父級div能自動取得到高度
優點：簡單，程式碼少，瀏覽器支援好，不容易出現怪問題
缺點：不少初學者不懂原理；如果頁面浮動版面多，就要增加很多空div，讓人感覺很不爽
3、父級div定義 偽類:after 和 zoom
<style type="text/css">
.div1{
background:#000080;
border:1px solid red;
}
.div2{
background:#800080;
border:1px solid red;
height:100px;
margin-top:10px
}
.left{
float:left;
width:20%;
height:200px;
background:#DDD
}
.rightright{
float:rightright;
width:30%;
height:80px;
background:#DDD
}
/*清除浮动代码*/
.clearfloat:after{
display:block;
clear:both;
content:"";
visibility:hidden;
height:0
}
.clearfloat{
zoom:1
}
</style>登入後複製
<div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">div2</div>登入後複製
原理：IE8以上和非IE瀏覽器才支援:after，原理和方法2有點類似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題
#優點：瀏覽器支援好，不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）
缺點：程式碼多，不少初學者不理解原理，要兩句程式碼結合使用，才能讓主流瀏覽器都支援。
4、父級div定義 overflow:hidden
<style type="text/css">
.div1{
background:#000080;
border:1px solid red;
/*解决代码*/
width:98%;
overflow:hidden
}
.div2{
background:#800080;
border:1px solid red;
height:100px;
margin-top:10px;
width:98%
}
.left{
float:left;
width:20%;
height:200px;
background:#DDD
}
.rightright{
float:rightright;
width:30%;
height:80px;
background:#DDD
}
</style>登入後複製
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">div2</div>登入後複製
原理：必須定義width或zoom:1，同時無法定義height，使用overflow:hidden 時，瀏覽器會自動檢查浮動區域的高度
優點：簡單，程式碼少，瀏覽器支援好
缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。
學習影片分享：css影片教學
#
以上是css怎麼清除浮動的詳細內容。更多資訊請關注PHP中文網其他相關文章！
