我被浮动搞晕了，处于一种似懂非懂的状态。
<!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 吗？
AllySu浏览 1854回答 4
4回答
-
阳火锅
不知道是你思维混乱，还是我功力不够理解不了你的意思。。试着回答一下你的问题：1，main有内容就要设置高度，不要靠内容去撑。 2，你看到的main撑开是你加了一个5px的边框线。 3，你想让footer回到底部就给main加个高度就可以了。我觉得这东西先达到效果再去理解比较重要。。反正这里不行就改那里，总会碰中一两个。。碰着碰着就理解了。。你不要寄希望于某一个人来用文字开拓你。。自己动手，因为毕竟CSS还是比较简单的。。我排版div的时候每个div都加一个border边框。这样比较直观。。然后我也是才学1个月的新手。。 -
WEYN
我以前用浮动时，解决失高的问题是在浮动元素外面加一层div,然后给这个div的高度设置成auto，overflow:auto。这样footer就跑不到header下面了。也就是给你.main{overflow:auto} -
特辣黄焖鸡
建议学习flex float已经不是目前排版的主流 另外我本来想好好解释 发现我的语言很匮乏.. 算了不说了
随时随地看视频慕课网APP
CSS3
Html/CSS