                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /如何用CSS进行网页布局

为何我的代码会变成这样，本该在main快里的颜色跑到foot块的下面去了？

<!DOCTYPE html>

<html>

<head>

body{margin:0;padding:0;font-size:20px;font-weight: bold;}

.head{height:100px;background:red;}

.main{height:300px;width:600px;background:#ccc;margin:0 auto;}

.a1{height:300px;width:20%;background:pink;}

.a2{height:300px;width:50%;background:yellow;}

.a3{height:300px;width:30%;background:purple;}

.foot{height:100px;width:600px;background:blue;margin:0 auto;}

</style>

</head>

<body>

</div>

</body>

</html>

慕村7315608

2019-03-14

源自：如何用CSS进行网页布局 5-1

关注问题我要回答

843

操作

收起

1 回答

慕码人6121104 回答被采纳 +2 积分
2019-03-14

因为你a1,a2,a3没有设置浮动，所以没有成一行显示，而是自上而下成一列，a2接在a1下面，a3接在a2下面，a1、a2、a3总高度为900px；但是3个元素都在main里面，而main设置的高度是300px，所以main实际高度只有300px，所以foot默认放在main下面的，这样就造成了foot和a2重叠起来了。将代码改成这样就行了：

.a1{height:300px;width:20%;background:pink;float:left}

.a2{height:300px;width:50%;background:yellow;float:left}

.a3{height:300px;width:30%;background:purple;float:right}

.foot{height:100px;width:600px;background:blue;margin:0 auto;clear:both}