在看《CSS那些事儿》遇到一个问题,在两列定宽结构中,高度为0的块级元素(即#container)的下外边距没有起作用,请问是怎么回事?
效果图和代码如下:
* {margin:0;padding:0;} /* 设置页面中所有元素的内外补丁为0,便于更便捷的页面布局 */#header, #footer {width:960px;height:30px;background-color:#E8E8E8;} /* 设置头部信息以及底部信息的宽度为960px,高度为30px,并添加浅灰色背景色 */#container {width:960px;margin:10px 0;} /* 设置页面内容区域的宽度为960px,并设置上下外补丁为10px */.mainBox {float:left; /* 将主要内容区域向左浮动 */width:680px;color:#FF0000;background-color:#333333;} /* 设置主要内容区域的宽度为680px,背景色以及文本颜色,并居左显示 */.sideBox {float:right; /* 将侧边栏向右浮动 */width:270px;color:#FFFFFF;background-color:#999999;} /* 设置侧边栏的宽度为270px,背景色以及文本颜色,并居右显示 */#footer {clear:both;} /* 清除内容区域的左右浮动 */
头部信息
主要内容区域
侧边栏
底部信息
回复讨论(解决方案)
楼主想说那儿没有效果?
楼主想说那儿没有效果?
中间的container里的元素都浮动了,所以container的高度为0,它与footer的间隔没有了~~这是为什么啊?但是它和header的间隔还有...
.sideBox { float:right; /* 将侧边栏向右浮动 */ width:270px; color:#FFFFFF; background-color:#999999; margin-bottom:10px; } /* 设置侧边栏的宽度为270px,背景色以及文本颜色,并居右显示 */
谢谢你,我明白你的方法可以解决,也知道其他解决的方法,但是我想明白为什么高度为0的div的上外边距有效而下外边距无效?
给container那个div清浮动,clearfix,你搜一下。
子级元素浮动脱离了文本流,其实你的父级div是有margin-bottom的,只不过高度为0,所以需要清浮动,能明白不?
子级元素浮动脱离了文本流,其实你的父级div是有margin-bottom的,只不过高度为0,所以需要清浮动,能明白不?
#container { width:960px; margin:10px 0;} /* 设置页面内容区域的宽度为960px,并设置上下外补丁为10px */
这一行已经给div加了margin-bottom了呀,,我知道清除浮动可以显示出来,但是我想明白的是,为什么div高度为0的时候上外边距有效而下外边距无效?!!
楼主,float是相对于下个元素的,如两个div,第一个div float:right那么两个div就会在同一行上,第二个div会出现在右边。当然一个容器内只有一个元素的话也可以使用float,不过这样效果就类似于text-align了。你对sideBox设置了浮动对它的下一个元素就影响,你可以去掉sideBox的浮动,可以看到对footer的margin-bottom就出来了
好吧,我发现我上面的说法有问题,自己也测试了一下,margin-bottom其实是存在的,只是因为container高度为0,所以就变成图片那样的效果。 应该是由于内层div的浮动使外层div高度为0造成的,给外层div(container )设置overflow:hidden,或者给container设置高度都可以解决。
首先谢谢您这么热情的帮助我。
我也知道是因为内层div的浮动导致外层的高度为0,也知道许多解决的方法,但是我的问题是,为什么外层的div高度为0的时候上外边距有效而下外边距有效? 我是想知道最根本的原因,,原理!
任何可以触发 container的hasLayou的方法都可以解决问题。脱离布局流是针对后面元素,对于前面元素布局是有效的,可以通过设置mainbox或者sidebox的margin可以发现这点。
子级元素浮动脱离了文本流,其实你的父级div是有margin-bottom的,只不过高度为0,所以需要清浮动,能明白不?
#container { width:960px; margin:10px 0;} /* 设置页面内容区域的宽度为960px,并设置上下外补丁为10px */
这一行已经给div加了margin-bottom了呀,,我知道清除浮动可以显示出来,但是我想明白的是,为什么div高度为0的时候上外边距有效而下外边距无效?!!
我想是因为margin-bottom与margin-top重复而已,随意改变其中一个,空出的大小都是按最大的显示。
子级元素浮动脱离了文本流,其实你的父级div是有margin-bottom的,只不过高度为0,所以需要清浮动,能明白不?
#container { width:960px; margin:10px 0;} /* 设置页面内容区域的宽度为960px,并设置上下外补丁为10px */
这一行已经给div加了margin-bottom了呀,,我知道清除浮动可以显示出来,但是我想明白的是,为什么div高度为0的时候上外边距有效而下外边距无效?!!
我想是因为margin-bottom与margin-top重复而已,随意改变其中一个,空出的大小都是按最大的显示。
af
ffaf
就像这两个,上面div的下外边距与下面div的上外边距重复了,应该就是外边距的空间共用。
换成padding时,你那个空隙就变成20px了。
谢谢,真的是外边距合并...css没有系统学,不知道这么基础的知识,谢谢你的耐心帮助!
本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈版权投诉
本文系统来源:php中文网