備注：浮動(dòng)會(huì)讓元素脫離了文檔流，使元素的顯示更為靈活，但它也是一把雙刃劍，同時(shí)會(huì)帶來(lái)其他問題。
1. 浮動(dòng)的元素會(huì)覆蓋后面處于文檔流中的元素
<html>
<head>
<style type="text/css">
.box-1{
float:left;
width:200px;
height:200px;
background-color:#333;
}
.box-2{
width:200px;
height:300px;
background-color:#ccc;
}
</style>
</head>
<body>
<div class="box-1"></div>
<div class="box-2"></div>
</body>
</html>
浮動(dòng)引起遮擋問題.png
解決：只要給box-2(與浮動(dòng)元素同級(jí)的元素)清除浮動(dòng)就行了
<html>
<head>
<style type="text/css">
.box-1{
float:left;
width:200px;
height:200px;
background-color:#333;
}
.box-2{
width:200px;
height:300px;
background-color:#ccc;
clear:both;
}
</style>
</head>
<body>
<div class="box-1"></div>
<div class="box-2"></div>
</body>
</html>
清除浮動(dòng).png
2. 浮動(dòng)元素會(huì)導(dǎo)致父元素高度坍塌
(1) 問題描述
浮動(dòng)的元素會(huì)覆蓋后面處于文檔流中的元素：當(dāng)子元素A使用浮動(dòng)屬性時(shí)，若父元素B有同級(jí)元素C，則元素C將被子元素A覆蓋。
<html>
<head>
<style type="text/css">
.div1{background:#000080;border:1px solid red;}
.div1 .left{float:left;width:20%;height:200px;background:#DDD}
.div1 .right{float:right;width:30%;height:80px;background:#DDD}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
</style>
</head>
<body>
<div class="div1 clearfloat">
<div class="left">Left浮動(dòng)</div>
<div class="right">Right浮動(dòng)</div>
</div>
<div class="div2">
div2
</div>
</body>
</html>
子元素浮動(dòng)導(dǎo)致父元素高度塌陷—與父級(jí)同級(jí)元素被遮擋覆蓋.png
(2) 問題分析
基礎(chǔ)：對(duì)于一個(gè)元素來(lái)說，不設(shè)固定高度時(shí)它的高度是由內(nèi)容撐開的，也就是說，如果這個(gè)元素里面沒有任何內(nèi)容，他的高度就是0，當(dāng)這個(gè)元素有內(nèi)容的時(shí)候，它就有了高度，也就是內(nèi)容的高度。
分析：當(dāng)子元素A使用浮動(dòng)屬性時(shí)，子元素將脫離文檔流，不再默認(rèn)繼承父級(jí)的寬高，父級(jí)也檢測(cè)不到子級(jí)的內(nèi)容，這會(huì)導(dǎo)致父元素的高度為0，即子元素浮動(dòng)導(dǎo)致父元素高度塌陷。
(3) 解決：解決思路主要是為父級(jí)清除浮動(dòng)從而使父級(jí)div能獲取到高度。
- 方案一（父級(jí)方法）：為父級(jí)div添加偽類after，并清除浮動(dòng)
display:block;
content:"";
clear:both;
即：
<html>
<head>
<style type="text/css">
.div1{background:#000080;border:1px solid red;}
.div1 .left{float:left;width:20%;height:200px;background:#DDD}
.div1 .right{float:right;width:30%;height:80px;background:#DDD}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
/*清除浮動(dòng)代碼*/
.clearfloat:after{display:block;content:"";clear:both;}
</style>
</head>
<body>
<div class="div1 clearfloat">
<div class="left">Left浮動(dòng)</div>
<div class="right">Right浮動(dòng)</div>
</div>
<div class="div2">
div2
</div>
</body>
</html>
解決子元素浮動(dòng)導(dǎo)致父元素高度塌陷.png
- 方案二（子級(jí)方法）：在浮動(dòng)的子元素尾部添加一個(gè)同級(jí)的空div標(biāo)簽或（br標(biāo)簽），并清除浮動(dòng)
clear:both;
即：
<html>
<head>
<style type="text/css">
.div1{background:#000080;border:1px solid red;}
.div1 .left{float:left;width:20%;height:200px;background:#DDD}
.div1 .right{float:right;width:30%;height:80px;background:#DDD}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
/*清除浮動(dòng)代碼*/
.clearfloat{clear:both}
</style>
</head>
<body>
<div class="div1 clearfloat">
<div class="left">Left浮動(dòng)</div>
<div class="right">Right浮動(dòng)</div>
<div class="clearfloat"></div>
/*<br class="clearfloat" />*/
</div>
</div>
<div class="div2">
div2
</div>
</body>
</html>
- 方案三（父級(jí)方法）：為父級(jí)設(shè)置高度
<html>
<head>
<style type="text/css">
.div1{background:#000080;border:1px solid red;height:200px;}
.div1 .left{float:left;width:20%;height:200px;background:#DDD}
.div1 .right{float:right;width:30%;height:80px;background:#DDD}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
</style>
</head>
<body>
<div class="div1 clearfloat">
<div class="left">Left浮動(dòng)</div>
<div class="right">Right浮動(dòng)</div>
</div>
</div>
<div class="div2">
div2
</div>
</body>
</html>
- 方案四（父級(jí)方法）：為父級(jí)設(shè)置overflow：hidden
<html>
<head>
<style type="text/css">
.div1{background:#000080;border:1px solid red;overflow:hidden}
.div1 .left{float:left;width:20%;height:200px;background:#DDD}
.div1 .right{float:right;width:30%;height:80px;background:#DDD}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
/*清除浮動(dòng)代碼*/
/*.clearfloat:after{display:block;content:"";clear:both;}*/
/*.clearfloat{clear:both}*/
</style>
</head>
<body>
<div class="div1 clearfloat">
<div class="left">Left浮動(dòng)</div>
<div class="right">Right浮動(dòng)</div>
</div>
</div>
<div class="div2">
div2
</div>
</body>
</html>
為父級(jí)設(shè)置
overflow：hidden或display:inline-block這兩種方法其實(shí)是根據(jù)BFC（塊級(jí)格式化上下文），因?yàn)锽FC會(huì)讓父元素包含浮動(dòng)的子元素，從而解決父元素高度坍塌問題，所以只要能觸發(fā)BFC就行。
- 方案五（父級(jí)方法）：為父級(jí)設(shè)置display:inline-block
<html>
<head>
<style type="text/css">
.div1{background:#000080;border:1px solid red;display:inline-block}
.div1 .left{float:left;width:20%;height:200px;background:#DDD}
.div1 .right{float:right;width:30%;height:80px;background:#DDD}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
/*清除浮動(dòng)代碼*/
/*.clearfloat:after{display:block;content:"";clear:both;}*/
/*.clearfloat{clear:both}*/
</style>
</head>
<body>
<div class="div1 clearfloat">
<div class="left">Left浮動(dòng)</div>
<div class="right">Right浮動(dòng)</div>
</div>
</div>
<div class="div2">
div2
</div>
</body>
</html>
- 方案六（父級(jí)方法）：為父級(jí)設(shè)置overflow:auto
<html>
<head>
<style type="text/css">
.div1{background:#000080;border:1px solid red;overflow:auto;}
.div1 .left{float:left;width:20%;height:200px;background:#DDD}
.div1 .right{float:right;width:30%;height:80px;background:#DDD}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
/*清除浮動(dòng)代碼*/
/*.clearfloat:after{display:block;content:"";clear:both;}*/
/*.clearfloat{clear:both}*/
</style>
</head>
<body>
<div class="div1 clearfloat">
<div class="left">Left浮動(dòng)</div>
<div class="right">Right浮動(dòng)</div>
</div>
</div>
<div class="div2">
div2
</div>
</body>
</html>
- 方案七（父級(jí)方法）：為父級(jí)設(shè)置display:table
<html>
<head>
<style type="text/css">
.div1{background:#000080;border:1px solid red;display:table;width:100%}
.div1 .left{float:left;width:20%;height:200px;background:#DDD}
.div1 .right{float:right;width:30%;height:80px;background:#DDD}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
/*清除浮動(dòng)代碼*/
/*.clearfloat:after{display:block;content:"";clear:both;}*/
/*.clearfloat{clear:both}*/
</style>
</head>
<body>
<div class="div1 clearfloat">
<div class="left">Left浮動(dòng)</div>
<div class="right">Right浮動(dòng)</div>
</div>
</div>
<div class="div2">
div2
</div>
</body>
</html>
備注：推薦使用前兩種方案，即為父級(jí)div定義偽類after或在子級(jí)結(jié)尾處添加空div標(biāo)簽(clear:both)這兩種方式。
拓展：浮動(dòng)布局多用于需要文字環(huán)繞的時(shí)候，畢竟這才是浮動(dòng)真正的用武之地；水平排列可使用inline-block了，參考css之display:inline-block布局。
