html 浮动之后留下空白,为什么设置浮动之后不紧贴父元素浮动？而是中间有一大片空白？...

*{

padding: 0;margin: 0;font-family: "微软雅黑";

}

li{

list-style: none;

text-align: center;

}

a{

text-decoration: none;

}

body{background: rgb(137,216,230);}

/*--------------头部----------*/

.header{

width: 100%;

height: 100px;

background: black;

}

.img{

float: left;

}

.header ul{

float: right;

width: 600px;

}

.header ul li{

float: left;

width: 100px;

height: 100px;

line-height: 100px;

font-size: 20px;

}

.header ul li a{

color: #fff;

}

/*-------------主体部分----------*/

.contain{

width: 90%;

margin: 0 auto;

height: 800px;

}

.left{

width: 60%;

height: 100%;

float: left;

}

.middle{

width: 1%;

height: 100%;

background: rgb(238,149,114);

float: left;

}

.right{

width: 39%;

height: 100%;

float: right;

}

• 课程
• 职业路径
• 实战
• 猿问
• 手记

我这个没有写完，写在这里卡主了，因为我的contain容器已经设置了宽高，我的left,middle,right也设置了宽高(而且他们的宽加起来是100%)，但是left在浮动的时候并没有紧贴着contain容器浮动，而是中间隔了一大片空隙，这是为什么？