<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合布局</title>
<style>
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.top{ height:100px;background:#9CF}
.head{ width:960px;margin:0 auto;height:100px;background:#F90}
.main{ width:960px;margin:0 auto;border:5px solid red;}
.left{ width:220px; height:600px; background:#ccc;float:left;}
.right{ width:740px; height:600px;background:#FCC; float:right}
.r_sub_left{ width:540px; height:600px; background:#9C3; float:left}
.r_sub_right{ width:200px; height:600px; background:#9FC; float:right;}
.footer{ height:50px; background:#9F9;}
</style>
</head>
<body>
<div class="top">
<div class="head">head</div>
</div>
<div class="main">清楚看到mian撑开
<div class="left">left </div>
<div class="right">
<div class="r_sub_left">sub_left</div>
<div class="r_sub_right">sub_right</div>
</div>
</div>
<div class="footer">footer</div>
</body>
</html> 1.上面的代码没有给main设置高度时，而main没有内容或子元素又设置成了浮动，footer会跑到head的下面。 2.当给 main中添加内容时，如“清楚看到mian撑开”，看到了塌陷的父元素main被撑开了。 3.在footer类中添加 clear:both;看到footer回到底部；当添加的是clear：left时，没有变化，当添加的是clear：right时，底部向上挪动了内容“楚看到mian撑开”的高度。问题：如何理解浮动？top,main,footer是并列元素，footer受main的影响，但是main的子元素left和right是如何影响footer的？ clear：left和clear：right的结果不一样，footer是如何受到影响的？是只有 r_sub_right 吗？
4 回答
慕沐8531599
TA贡献16条经验 获得超2个赞
不知道是你思维混乱，还是我功力不够理解不了你的意思。。
试着回答一下你的问题：1，main有内容就要设置高度，不要靠内容去撑。
2，你看到的main撑开是你加了一个5px的边框线。
3，你想让footer回到底部就给main加个高度就可以了。
我觉得这东西先达到效果再去理解比较重要。。反正这里不行就改那里，总会碰中一两个。。碰着碰着就理解了。。你不要寄希望于某一个人来用文字开拓你。。自己动手，因为毕竟CSS还是比较简单的。。我排版div的时候每个div都加一个border边框。这样比较直观。。然后我也是才学1个月的新手。。
WEYN
TA贡献5条经验 获得超2个赞
我以前用浮动时，解决失高的问题是在浮动元素外面加一层div,然后给这个div的高度设置成auto，overflow:auto。这样footer就跑不到header下面了。
也就是给你.main{overflow:auto}
- 4 回答
- 0 关注
- 1771 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消