CSS:margin重叠-父子关系

css中父div里面有一个子div,给子div添加margin-top: 20px,发现了一个问题!!

给子div添加margin-top: 20px,发现父子DIV都一起相对BODY下移了20PX,为何不是只是子DIV下移20PX ? 如果我给父DIV添加border: 1px solid,就可以实现父DIV不动,只是子DIV相对父DIV下移了20PX,难道就一定要设置父DIV的border才能实现吗? 谢谢! 代码如下:

<head>
    <title></title>
    <style type="text/css">
        body
        {
            margin: 0;
            padding: 0;
        }
        #father
        {
            width: 500px;
            height: 400px;
            background: pink;
            border: 1px solid;
        }
        #child
        {
            width: 100px;
            height: 50px;
            margin-top: 20px;
            background: blue;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="child">
        </div>
    </div>
</body>


给父亲div 设置 overflow: hidden;可以解决

注解:
1. BFC(block formatting context,中文常译为块级格式化上下文)是 W3C CSS
2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关
系和相互作用。
在进行盒子元素布局的时候, BFC 提供了一个环境, 在这个环境中按照一定规则进
行布局不会影响到其它环境中的布局。比如浮动元素会形成 BFC,浮动元素内部子元素
的主要受该浮动元素影响,两个浮动元素之间是互不影响的。
也就是说,如果一个元素符合了成为 BFC 的条件,该元素内部元素的布局和定位
就和外部元素互不影响(除非内部的盒子建立了新的 BFC), 是一个隔离了的独立容器。
在 CSS3 中,BFC 叫做 Flow Root。
2. 形成 BFC 的条件(符合以下任一条件即可):
1) float 的值不为 none;
2) overflow 的值不为 visible;
3) display 的值为 table-cell、table-caption 和 inline-block 之一;
4) position 的值不为 static 或 relative 中的任何一个;
3. BFC 常见作用
1) 包含浮动元素
BFC 会 根据子元素的情况自 适应 高度 ,这个 特性 是 对父元素 使 用
overflow:hidden/auto/scroll、 float:left/right 样式可以闭合浮动的
原理。
此外 网上 有 资 料 说 使用 display:table 可以 隐 式 触 发 table-cell/table-caption,来创建 BFC。
<div style="border:1px solid #00F;overflow:hidden;width:300px;">
<div style="float:left;background:#939;">我的父元素是 BFC</div>
</div>
<div style="line-height:3em;">----------我是华丽分割线-----------</div>
<div style="border:1px solid gray;width:300px;">
<div style="float:left;background:#3C6;">我的父元素不是 BFC</div>
</div>
上面的例子中,有两个 div ,它们各包含一个设置了浮动的 div 元素,但
第二个 div 出现了“高度塌陷”,这是因为内部的浮动元素脱离了普通流,因此
该 div 相当于一个空标签,没有高度和宽度,即高度为 0 ,上下边框也重叠在
一起。而第二个 div 使用 overflow: hidden 创建了 BFC ,可以包含浮动
元素,因此能正确表现出高度,其边框位置也正常了。
PS:此方法只能在支持 BFC 的浏览器(IE8+, firefox, chrome, safari)通
过创建新的 BFC 闭合浮动;在不支持 BFC 的浏览器 (IE6-7),需要通过触发
hasLayout 闭合浮动。
2) 不被浮动元素覆盖
浮动元素会无视兄弟元素的存在, 覆盖在兄弟元素的上面, 为该兄弟元素创建
BFC 后可以阻止这种情况的出现,如下示例:
<div style="float:left;width:150px;height:50px;background:#FF0;">
我是浮动元素
</div>
<div style="width:200px;height:80px;background:#30F;color:#fff;">
我是非浮动元素,并且没有创建 BFC
</div>
<div style="line-height:3em;">----------我是华丽分割线-----------</div>
<div style="float:left;width:150px;height:50px;background:#FF0;">
我是浮动元素
</div>
<div
style="width:200px;height:80px;background:#30F;color:#fff;display:inl
ine-block;">
我是非浮动元素,创建了 BFC
</div>
效果图所示,蓝色背景的元素通过 display:inline-block 创建了 BFC,
则浮动的兄弟元素就不覆盖在该元素上面了。
以上的情况仅是元素宽度之和没有超出父元素宽度的情况,假设浮动元素宽度
和它的非浮动兄弟元素宽度都超过了父元素的宽度,非浮动元素会下降到下一行,
即处于浮动元素下方,如下所示:
<div style="width:300px;">
<div style="float:left;width:150px;height:50px;background:#FF0;">
我是浮动元素
</div>
<div
style="width:200px;height:80px;background:#30F;color:#fff;overflow:hi
dden;">
我是非浮动元素,创建了 BFC
</div>
</div>
3) 阻止父子元素的 margin 折叠
在 《认识 margin 折叠》 一文中讲过外边距折叠的规则:仅当两个块级元素毗
邻并且在同一个块级格式化上下文时,它们垂直方向之间的外边距才会叠加。也就
是说,即便两个块级元素相邻,但当它们不在同一个块级格式化上下文时它们的边
距也不会折叠。示例如下。
<div style="margin-top:20px;background:yellow;width:300px;">
<div style="margin-top:20px;">
我的上外边距是 20px,父级元素不是 BFC
</div>
</div>
<div style="margin-top:20px;background:yellow;overflow:auto;width:300px;">
<div style="margin-top:20px;">
我的上外边距是 20px,父级元素是 BFC
</div>
</div>
如上图的例子,上述 div 元素都有顶部外边距,但第二个 div 的边距没有
与它的子元素的外边距折叠。这是因为第二个 div 创建了新的 BFC。
以上代码在 IE8、IE10 和 chrome 测试通过,了解 IE6-7 的

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值