为什么设置浮动之后不紧贴父元素浮动？而是中间有一大片空白？
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
*{
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;
}
</style>
</head>
<body>
<div class="all">
<div class="header">
<div class="img">
<img src="http://climg.mukewang.com/59093e9c00016ce303000100.png">
</div>
<ul>
<li><a href="#">课程</a></li>
<li><a href="#">职业路径</a></li>
<li><a href="#">实战</a></li>
<li><a href="#">猿问</a></li>
<li><a href="#">手记</a></li>
</ul>
</div>
<div class="contain">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
我这个没有写完，写在这里卡主了，因为我的contain容器已经设置了宽高，我的left,middle,right也设置了宽高（而且他们的宽加起来是100%），但是left在浮动的时候并没有紧贴着contain容器浮动，而是中间隔了一大片空隙，这是为什么？
英姿飒爽豆腐块1回答
-
__innocence
虽然他们的宽度加一起是100%，但是每一块，计算宽度的时候，并不是精确的值，计算的宽度的时候，因为小数点的原因，一部分宽度丢失了。你可以审查元素，看看父容器的宽度和子元素的宽度，它们并不是60%，1%，39%
随时随地看视频慕课网APP
Html/CSS