您的位置：首页 > Web前端 > CSS

CSS：margin重叠-父子关系

2015-11-05 20:59 447 查看

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 的

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航