1、高度塌陷
一、BFC(块的格式化环境)特性:1.父元素的垂直外边距不会和子元素重叠
2.开启BFC的元素不会被浮动元素所覆盖
3.开启后BFC的元素可以包含浮动的子元素
二、如何开启BFC
1.设置元素浮动
2.设置元素绝对定位
3.设置元素对inline-block
4.将元素的overflow设置为一个非visible的值
IE6及以下的浏览器中不支持BFC
hoslayout
5.zoom:1;表示放大几倍。数值是1,是原始值大小,就是不放大。通过它可以开启hasLayout
IE6及以下的浏览器中不支持BFC
hoslayout
zoom: 1;
2、处理高度塌陷
overfolw:hidden;
zoom:1;
3、导航条
/*清除默认浏览器的样式*/
*{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;
}
4、清除浮动
/*清除左浮动*/
clear:left;
/*清除右浮动*/
clear:right;
/*清除对你影响大的浮动*/
clear:both;