在各種瀏覽器兼容問題上艰躺，這樣讓清除浮動(dòng)更難了滑进，下面總結(jié)8種清除浮動(dòng)的方法：
浮動(dòng)導(dǎo)致的問題：父級標(biāo)簽高度塌陷---其實(shí)就是沒有高度
下面八中方法：
<h4>1搬男、父級div定義 height</h4>
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box {
width: 300px;
/*解決問題*/
height: 400px;
background: bisque;
border: 2px solid black;
}
#div1 {
width: 100px;
height: 200px;
float: left;
background: red;
}
#div2 {
width: 100px;
height: 200px;
float: right;
background: yellow;
}
</style>
</head>
<body>
<div id="box">
<div id="div1">
1
</div>
<div id="div2">
2
</div>
</div>
</body>
</html>
</pre>
原理：父級div手動(dòng)定義height经窖，就解決了父級div無法自動(dòng)獲取到高度的問題坡垫。
優(yōu)點(diǎn)：簡單、代碼少画侣、容易掌握
缺點(diǎn)：只適合高度固定的布局冰悠，要給出精確的高度，如果高度和父級div不一樣時(shí)配乱，會(huì)產(chǎn)生問題
建議：不推薦使用溉卓，只建議高度固定的布局時(shí)使用
<h4>2、結(jié)尾處加空div標(biāo)簽 clear:both </h4>
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box {
width: 300px;
background: bisque;
border: 2px solid black;
}
#div1 {
width: 100px;
height: 200px;
float: left;
background: red;
}
#div2 {
width: 100px;
height: 200px;
float: right;
background: yellow;
}
.clearflow {
clear: both;
}
</style>
</head>
<body>
<div id="box">
<div id="div1">
1
</div>
<div id="div2">
2
</div>
<!--解決問題-->
<div class="clearflow">
</div>
</div>
</body>
</html>
</pre>
原理：添加一個(gè)空div搬泥，利用css提高的clear:both清除浮動(dòng)桑寨，讓父級div能自動(dòng)獲取到高度
優(yōu)點(diǎn)：簡單、代碼少忿檩、瀏覽器支持好尉尾、不容易出現(xiàn)怪問題
缺點(diǎn)：不少初學(xué)者不理解原理；如果頁面浮動(dòng)布局多休溶，就要增加很多空div代赁，讓人感覺很不好
建議：不推薦使用，但此方法是以前主要使用的一種清除浮動(dòng)方法
<h4>3兽掰，父級div定義 偽類:after </h4>
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1 {
width: 100px;
height: 200px;
float: left;
background: red;
}
#div2 {
width: 100px;
height: 200px;
float: right;
background: yellow;
}
#box {
width: 300px;
background: bisque;
border: 2px solid black;
}
.clearfloat {zoom:1}
.clearfloat:after {
/* 這三句必須寫 */
display:block;
clear:both;
/*必須有這樣寫*/
content:"";
/* 這兩句寫不寫無所謂*/
/*visibility:hidden;*/
/*height:0;*/
}
</style>
</head>
<body>
<div id="box" class="clearfloat">
<div id="div1">
1
</div>
<div id="div2">
2
</div>
</div>
</body>
</html>
</pre>
原理：IE8以上和非IE瀏覽器才支持:after芭碍，原理和方法2有點(diǎn)類似，zoom(IE專有屬性)可解決ie6,ie7浮動(dòng)問題 （其他瀏覽器不用）
優(yōu)點(diǎn)：瀏覽器支持好孽尽、不容易出現(xiàn)怪問題（目前：大型網(wǎng)站都有使用窖壕，如：騰迅，網(wǎng)易杉女，新浪等等）
缺點(diǎn)：代碼多瞻讽、不少初學(xué)者不理解原理，要兩句代碼結(jié)合使用才能讓主流瀏覽器都支持熏挎。
建議：推薦使用速勇，建議定義公共類，以減少CSS代碼坎拐。
<h4>4烦磁，父級div定義 overflow:hidden </h4>
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1 {
width: 100px;
height: 200px;
float: left;
background: red;
}
#div2 {
width: 100px;
height: 200px;
float: right;
background: yellow;
}
#box {
width: 300px;
background: bisque;
border: 2px solid black;
/*解決問題*/
overflow: hidden;
}
</style>
</head>
<body>
<div id="box" class="clearfloat">
<div id="div1">
1
</div>
<div id="div2">
2
</div>
</div>
</body>
</html>
</pre>
原理：必須定義width或zoom:1养匈，同時(shí)不能定義height，使用overflow:hidden時(shí)都伪，瀏覽器會(huì)自動(dòng)檢查浮動(dòng)區(qū)域的高度
優(yōu)點(diǎn)：簡單呕乎、代碼少、瀏覽器支持好
缺點(diǎn)：不能和position配合使用陨晶，因?yàn)槌龅某叽绲臅?huì)被隱藏猬仁。
建議：只推薦沒有使用position或?qū)verflow:hidden理解比較深的朋友使用。
<h4>5先誉、父級div定義 overflow:auto </h4>
與方法4相同
這個(gè)不能用滾動(dòng)條湿刽，所以不推薦使用哦！
<h4>6褐耳、父級div 也一起浮動(dòng) </h4>
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1 {
width: 100px;
height: 200px;
float: left;
background: red;
}
#div2 {
width: 100px;
height: 200px;
float: right;
background: yellow;
}
#box {
width: 300px;
background: bisque;
border: 2px solid black;
/*解決問題*/
float: left;
}
</style>
</head>
<body>
<div id="box" class="clearfloat">
<div id="div1">
1
</div>
<div id="div2">
2
</div>
</div>
</body>
</html>
</pre>
原理：所有代碼一起浮動(dòng)叭爱，就變成了一個(gè)整體
優(yōu)點(diǎn)：沒有優(yōu)點(diǎn)
缺點(diǎn)：會(huì)產(chǎn)生新的浮動(dòng)問題。
建議：不推薦使用漱病，只作了解。
<h4>7把曼、父級div定義 display:table </h4>
原理：將div屬性變成表格
優(yōu)點(diǎn)：沒有優(yōu)點(diǎn)
缺點(diǎn)：會(huì)產(chǎn)生新的未知問題杨帽。
建議：不推薦使用，只作了解嗤军。
<h4>8注盈、結(jié)尾處加 br標(biāo)簽 clear:both </h4>
與第二種方法一樣，這里只要是
塊元素都是可以的;
