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;

你可能感兴趣的:(六)