HTML外边框塌陷什么意思,html-margin塌陷 ：

margin塌陷 其实就是一个bug。很多人在开发的时候都会遇到。但是却不知道是怎么产生的。

一下代码演示margin塌陷

参考：

这里是一个父子关系的div

首先我们设置一下这个2个div 的css样式

.ch{

margin-left: 100px; /*左边距离父标签100px*/

width: 100px;

height: 100px;

background-color: red;

}

.fa{

margin-left: 100px;

margin-top: 100px;

width: 200px;

height: 200px;

background-color: blue;

}

一下是运行效果

屏幕快照 2018-06-22 上午10.23.01.png

这么看是没有任何问题的

如果我门在加上margin-top: 100px;顶部距离父标签100px

.ch{

margin-left: 100px; /*左边距离父标签100px*/

margin-top: 100px;/*顶部距离父标签100px*/

width: 100px;

height: 100px;

background-color: red;

}

屏幕快照 2018-06-22 上午10.23.01.png

效果却并没有想我们预期的那样子试图顶部距离父标签100px

这个现象就是margin塌陷

要解决这个问题有2个方法：

第一个(强硬手段，适合外包)特点：简单粗暴

我们可以直接设置父标签border-top: 1px solid yellow;

.fa{

margin-left: 100px;

margin-top: 100px;

width: 200px;

height: 200px;

background-color: blue;

border-top: 1px solid yellow;

}

效果图：

屏幕快照 2018-06-22 上午10.45.22.png

效果达到

说明border-top: 1px solid yellow，可以解决这个问题，yellow颜色只是我胡乱设置的。不必在意。但是在开发的还是设置和背景颜色一样比较好。

第二方法：简称bfc (block format context)块级格式化上下文。(专业用该方法)

注意：如果要使用这个，一定要对其要有一定的理解。不然就算解决了margin塌陷, 也会出现其他的问题。

解释一下：

你可这么理解，css其实就是把标签当成是一个“块”或者说是“盒子”。每一个盒子都有一摸一样的渲染规则。就是你设置什么属性，它就会按照你写的代码，按照你的方式图形化出来。

bfc就是通过一种手段，改变其中一个或者多个盒子中的渲染规则，就是不让他按照传统的语法来，那么这些盒子就会按照另一套语法来。其实bfc改变的语法规则很少，百分之一可能都不到，但是就是这很少的这部分可以解决这个问题。

如何触发bfc

display: inline-block;

position: absolute;

float: right/left;

overflow: hidden;

只要在父标签设置了这几个属性的其中一个就可以出发bfc，其实使用起来很简单，只是使用这个，一定要知道，这几个属性的含义，针对性的使用。

.fa{

/*display: inline-block;*/ 改变标签的类型

position: absolute; 对象脱离常规流

/*float: right/left;*/ 设置元素浮在右边/左边

/*overflow: hidden;*/ 超出的部分隐藏

margin-left: 100px;

margin-top: 100px;

width: 200px;

height: 200px;

background-color: blue;

}