2019-10-15

一、高度塌陷

BFC特性：

（1）父元素的垂直外边距不会和子元素重叠

（2）开启BFC的元素不会被浮动元素符覆盖

（3）开启BFC的元素可以包含浮动的子元素

开启BFC

（1）设置元素浮动

（2）设置元素绝对定位

（3）设置元素为inline-block

（4）将元素的overflow设置为一个非visible的值

IE6及以下的浏览器中不支持BFC

  hoslayout

  zoom: 1;

二、处理高度塌陷

overfolw:hidden;

zoom:1;

三、导航条

/*清除默认浏览器的样式*/

*{margin: 0PX;

padding: 0PX;}

.nav{

/*去除项目符号*/

list-style: none;

background-color: #ffc0cb;

/*指定宽度，默认会开启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;

}

四、清除浮动

/*清除左浮动*/

clear：left；

/*清除右浮动*/

clear：right；

/*清除对你影响大的浮动*/

clear:both;