一、高度塌陷

BFC特性：

（1）父元素的垂直外邊距不會(huì)和子元素重疊

（2）開啟BFC的元素不會(huì)被浮動(dòng)元素符覆蓋

（3）開啟BFC的元素可以包含浮動(dòng)的子元素

開啟BFC

（1）設(shè)置元素浮動(dòng)

（2）設(shè)置元素絕對(duì)定位

（3）設(shè)置元素為inline-block

（4）將元素的overflow設(shè)置為一個(gè)非visible的值

IE6及以下的瀏覽器中不支持BFC

? hoslayout

? zoom: 1;

二、處理高度塌陷

overfolw:hidden;

zoom:1;

三、導(dǎo)航條

/*清除默認(rèn)瀏覽器的樣式*/

*{margin: 0PX;

padding: 0PX;}

.nav{

/*去除項(xiàng)目符號(hào)*/

list-style: none;

background-color: #ffc0cb;

/*指定寬度，默認(rèn)會(huì)開啟haslayout*/

width: 940px;

margin: 50px auto;

/*解決高度塌陷*/

overflow: hidden;

zoom: 1;

}

.nav li{

float: left;

width: 10%;

}

.nav a{

display: block;

width: 100%;

text-align:center;

padding:? 5px 0;

text-decoration: none;

font-weight: bold;

color: #fff;

}

.nav a:hover{

background-color: #cc0000;

}

四、清除浮動(dòng)

/*清除左浮動(dòng)*/

clear：left；

/*清除右浮動(dòng)*/

clear：right；

/*清除對(duì)你影響大的浮動(dòng)*/

clear:both;