HTML/CSS初学 学习笔记2：解决CSSmargin塌陷以及margin合并（深入解读）

margin塌陷

如图所示代码，我们欲使黄色块位于黑色块的右下方

发现在黄色块加上margin-top，它并未向下，而添加margin-left，它相对于黑色块向右了50px，而且哪怕将黄块的margin-top需要改为150px，它实现的效果则是带着黑色块一起向下移动了50px，且自身相对于黑块仍是右上方。
这就是margin塌陷：

父子嵌套元素垂直方向的 margin，父子元素是结合在一起的，他们两个会取其中最大的值。正常情况应该是父级相对于浏览器进行定位，子级应该相对于父级定位的。但是 margin 塌陷是在父级相对于浏览器进行定位时，子级没有相对于父级定位，就像父级的顶棚没有了一样，子级相对于父级，就像塌陷了一样

margin 塌陷解决方案

一种土法（千万不能用）
为wrapper 增添一句

border-top: 1px solid black;

虽然这样也能达到效果，但是，千万不能用

应该用 bfc（block format context 块级格式化上下文），改变父级的渲染规则

触发 bfc，特定的盒子会遵循另一套规则

弥补 margin 塌陷，可以使用 bfc，如何触发一个盒子的bfc？

• position:absolute;
• display:inline-block;
• float:left/right; //浮动
• overflow:hidden; //溢出盒子的部分要隐藏展示

注意

• margin 塌陷的解决方法只改了 css，未改变html
• 这四种方法都能触发 bfc，但是使用的时候都带来了新的麻烦在具体情况中，针对需求，哪个触发方式没有影响，就用哪个解决塌陷问题

margin合并

先来看个例子


将text2的margin-left取消注释

同样的想法我们运用在div上

当去掉注释margin-top，却发现，下方的div块并未移动

两个兄弟结构的元素，他俩垂直方向的 margin 是合并的
这就是margin合并

margin 合并解决解决方案

margin合并 依然使用 bfc
如下方法修改即可

但是，注意这种修改方式是修改HTML，修改了我们的骨架这在开发中是不允许的，所以，实际开发中，在 margin 合并这个 bug 上，我们不用 bfc（不能改变 html 的结构）假如我们需要两个 div 直接有 300px，那就设置上面的 margin-bottom:300px;来解决距离的问题

---

Ps:若有错误，请提出