关于本节的疑问
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两列布局</title>
<style>
body{
margin: 0;
padding: 0;
color:#fff;
}
.container{
width: 800px;
height: auto;
background: #4c77f2;
margin: 0 auto;
text-align: center;
float: left;
}
.header{
width:800px;
height: 50px;
background: #5880f9;
margin: 0 auto;
text-align: center;
font-size: 16px;
line-height: 50px;
}
.footer{
width: 800px;
height: 100px;
background: #ed817e;
margin: 0 auto;
text-align: center;
font-size: 16px;
line-height: 100px;
clear:both;
}
.left{
width:200px;
height: 1000px;
float:left;
background: #67b581;
}
.right{
width: 600px;
height: 1000px;
float:right;
background: #d0d0d0;
}
</style>
</head>
<body>
<div class="header">这是页面头部</div>
<div class="container">
<div class="left">这是页面左侧</div>
<div class="right">这是页面右侧</div>
</div>
<div class="footer">这是页面底部</div>
</body>
</html>
老师代码是设置了container的高度 解决的塌陷问题，，我改了代码，，变成container同样这是为float，然后再把下面的footer元素这是clear，于是也解决了塌陷问题，，但是这样子后会出现中间左浮动或者右浮动情况，，无法和上下对齐了，这种情况下怎么解决呢？
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星