按理说介个运行出来应该是之间有白色边界的(图片圈出来的地方)但是为什么它没有呢,是哪里写错了还是写少了啥
附上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动定位</title>
<style>
*{
/*默认样式清零*/
padding: 0;
margin: 0;
}
body{
font-size: 14px;
}
#container{
margin: 0 auto;/*居中*/
width: 1000px;
height: 500px;
/*background-color: #6cf;*/
}
#header{
height: 100px;
background-color: #6cf;
margin-bottom: 5px;/*与下面main部分之间有个空白分割*/
}
#main{
height: 500px;
background-color: #cff;
margin-bottom:5px;
}
#aside{
float: left;
width: 300px;
height: 500px;
background-color: #6cf;
}
#content{
float: right;/*left也行但是中间的空隙没了,也可aside的margin-right:5px就有空隙*/
width: 695px;
height: 500px;
background-color: #cff;
}
#foot{
height: 60px;
background-color: #6cf;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="main">
<div id="aside"></div>
<div id="content"></div>
</div>
<div id="foot"></div>
</div>
</body>
</html>