margin塌陷问题
问题描述：
在文档流中，父元素的高度默认是被子元素撑开的
也就是说 子元素有多高，父元素就有多高
但是当子元素设置浮动之后，子元素会完全脱离文档流
此时将会导致子元素无法撑开父元素的高度，导致父元素高度塌陷
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin塌陷</title>
<style type="text/css">
.parent{
border: 10px red solid;
}
.child{
background-color: yellow;
width: 100px;
height: 100px;
float: left;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin塌陷</title>
<style type="text/css">
.parent{
border: 10px red solid;
}
.child{
background-color: yellow;
width: 100px;
height: 100px;
float: left;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>网页效果：下图为元素脱离文档流的结果
当我们注释掉浮动属性的时候
我们可以得到想要的效果
如上图所示，由于父元素高度塌陷，子元素想要通过margin-top向下移动，可是失败了，即使我们调试的时候通过在父元素添加border-top也无济于事。如果margin-top超过一定限度就会带着父级一起向下移动。
解决方案：
（一）页面中元素都有一个隐藏的属性--Block Formatting Content块级格式化上下文（简称BFC）
/* 我们这里简单说一下BFC
具有bfc的元素我们可以抽象的理解成为隔离了的独立容器
那这个隐藏的属性我们如何触发（开启）呢？
方法：
满足下面任一条件即可
浮动元素 float属性值为除了none以外的值
绝对定位元素 position 为 absolute、fixed
-
-
-
- display 为inline-blocks,table-cells,table-captions
-
overflow 为 hidden,auto,scroll
bfc的三个特性：
a.阻止外边距折叠
b.可以包含浮动的元素
c.可以阻止元素被浮动元素覆盖 */
正文继续
所以只需要在父级元素上加一个overflow：hidden就可以，其他如上条件之一，如果情况合适均可。
（二）给父级元素添加一个边框，就可以解决；如果不希望看到边框，可以将边框的颜色设成背景色即可。
margin合并问题
问题描述：
处于上下位置关系的两个div容器，在通过margin-top、margin-bottom改变间距时，如果两个属性的值相同时，则两容器间的距离就是这个值；如果两个属性的值不同，则取较大值作为两容器间的距离；
如下图所示，两容器间距本来应该是上容器的margin-bottom值+下容器的margin-top值
但现实是两容器间距等于margin-bottom和margin-top两者中的最大值
这类bug不必解决，只需要调节最大值达到要求即可。
但也存在着解决方法，那就是在两容器外都套上相同容器（class/id相同的），并在容器中设定overflow：hidden。
***************************************************************************************************************
文章结束~ 撒花✿✿ヽ(°▽°)ノ✿~
扫一扫
2129
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
