我被浮动搞晕了，处于一种似懂非懂的状态。

<!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