QQ截圖20170527164120.png
<div>
<div style="float:left;width:200px;height:200px;background:red;"></div>
<div style="float:left;width:200px;height:200px;background:blue;"></div>
<div style="float:left;width:200px;height:200px;background:orange;"></div>
<div style="float:left;width:200px;height:200px;background:yellow;"></div>
</div>
以上的代碼中端姚，我們定義了四個(gè)背景顏色不一致晕粪，大小一致的盒子，并對(duì)每個(gè)盒子設(shè)置了左浮動(dòng)渐裸，四個(gè)盒子被包裹在div盒子中巫湘。
chrome開(kāi)發(fā)者工具中，我們看到外層盒子的高度變成了0昏鹃。內(nèi)部盒子的高度是200px尚氛，正常情況下，父元素的高度是子元素的高度洞渤。
這里因?yàn)榻o四個(gè)盒子設(shè)置了浮動(dòng)阅嘶，引起了高度塌陷。當(dāng)沒(méi)有高度的父級(jí)盒子里的元素設(shè)置了浮動(dòng)的時(shí)候。父元素中內(nèi)部高度因?yàn)槭瞧胀髦械膲K元素?fù)纹饋?lái)的讯柔，所以這個(gè)時(shí)候父元素的高度會(huì)變成0抡蛙，或者會(huì)有部分浮動(dòng)元素的位置會(huì)超出父元素的高度之外。這種現(xiàn)象魂迄，叫做高度塌陷粗截。
解決方法：
- 父級(jí)元素設(shè)置overflow:hidden;或者position:absolute或者position: fixed;
2.清除浮動(dòng):父級(jí)元素添加clearfix
.clearfix{*zoom:1}
.clearfix:after{
content:"\0020";
display:block;
clear:both;
width:0;
height:0;
}
