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

gto-h***

混合布局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;} head

清楚看到mian撑开 left
        sub_left
      sub_right

footer

   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  吗？

N***

不知道是你思维混乱，还是我功力不够理解不了你的意思。。
试着回答一下你的问题：1，main有内容就要设置高度，不要靠内容去撑。
2，你看到的main撑开是你加了一个5px的边框线。
3，你想让footer回到底部就给main加个高度就可以了。
我觉得这东西先达到效果再去理解比较重要。。反正这里不行就改那里，总会碰中一两个。。碰着碰着就理解了。。你不要寄希望于某一个人来用文字开拓你。。自己动手，因为毕竟CSS还是比较简单的。。我排版div的时候每个div都加一个border边框。这样比较直观。。然后我也是才学1个月的新手。。

老***

我以前用浮动时，解决失高的问题是在浮动元素外面加一层div,然后给这个div的高度设置成auto，overflow:auto。这样footer就跑不到header下面了。
也就是给你.main{overflow:auto}

已有账号？

找人解决需求

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

全部参与2

热门问答

gto-h***

今日需求悬赏

今日问答求助

发布任务需求已有1031167位用户正在使用天盟网服务

新手帮助

平台规则

关于天盟

一键快捷导航

微信公众号

手机客户端