Learn HTML&CSS the hard way VIII

在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例

---

想出现外边距合并：

1.两个margin必须是相邻的

2.两个块级元素必须都处于常规的文档流中（非float和绝对定位），并且在同一BFC中

3.没有间隙，没有内边距或者边框将他们分隔开

合并的情况：

1.相邻的兄弟元素，margin-bottom与margin-top合并

2.父子元素的margin-top合并

3.父子元素的margin-bottom合并：

   只在父元素height为auto且不设置边框时合并

父元素无边框，高度为auto，父子元素margin-bottom合并

父元素设置高度，无边框，父子元素bottom不合并

父元素设置边框以及高度，父子元素bottom不合并

高度auto，设置边框，不合并

4.高度为0，不包含文档流子元素，没有建立BFC，自身的margin-top和margin-bottom将合并

想要不产生合并有很多情况：

1.兄弟元素采用float，绝对定位元素不产生外边距合并，并且闭合浮动的元素的border-top会紧贴着相应的浮动元素的margin-bottom。

2.兄丢元素也可采用inline-block

3.父子元素，则为父元素添加border或padding

去除inline-block内缝隙有哪几种常见方法？

---

1.float

2.写在一排

3.父元素里的字体设置为0px

4.负边距

父容器使用overflow：auto / hidden撑开高度的原理是什么？

---

使用overflow：auto/hidden后，整体形成了bfc，相当于清除了浮动，否则当子元素浮动父元素不设置具体高度时，父元素塌陷。

ul中加入overflow后

BFC是什么？如何形成BFC，有什么作用？

---

BFC的中文名称使块级格式化上下文，我的理解是一种块级元素的布局方式，BFC中的元素与外界元素互不干扰。在BFC中，盒子从顶端开始垂直地一个接一个排列，垂直的间隙有margin值决定（上文的外边距合并），每个盒子的外左边缘margin-left会触碰到容器的左边缘border-left。

如何形成BFC：

1.浮动元素、绝对定位元素

2.非块级盒子的块级容器（inline-block,table-cell,table-caption,flex,inline-flex）

3.overflow值部位visiable的块级盒子

BFC的作用：

1.防止外边距合并

BFC的特点是不受外界元素影响，所以可以设置子元素自己构成BFC，这样子元素之间就不会出现边距合并的情况了

可以看到JS的外边距没有合并

2.清除浮动，防止父容器塌陷

绝对定位和浮动会使元素脱离文档流，造成没有设置高度的父容器塌陷，可以用BFC解决此问题

父容器的塌陷

更改为BFC后恢复正常

3.避免文字环绕

浮动的初衷是为了文字环绕，然而一些情况下我们不想这么做

我们想要的结果是

实际的情况是

这里举个栗子

可以发现现在的floated div是脱离了文档流，浮动在p元素上面的，而p元素包含了整行，这里我们在p元素里加入overflow，使其形成BFC就会出现清除文字环绕的效果了

这里有一个问题，一开始我以为清除文字环绕需要把overflow加到container里面的，因为我想把整体变成BFC，但是这个方法一是没有效果，二是就算变成了BFC也垂直排列，不符合要求，然后我把overflow加入到floated里面，还是没有效果，最终在p里面实现了清除环绕，我的问题是：1.前面两个加入overflow为什么没有效果，2.最后的p加入overflow为什么有效果了。

对于第一个问题，没有思路。对于第二个问题我的思考是，最后的p自己形成了BFC不受外界影响，但是他和float元素并列了就代表他没有忽略floated div，应该是和他在同一层面上的。但是浮动元素不是块级元素吗，如果在同一层面上的话，应该floated div独占一行才对呀？为了还能并列呢？

4.多列布局

这里对最后一个块元素进行了处理，将他去除浮动，变为BFC，保证沾满一行而不是由于宽度超出预期而降到第二行，那么这个问题就和上面的那个去除文字环绕的问题2一样了，为什么BFC后可以和浮动的块级元素在一行而不是块级元素独占一行或者武略浮动元素，被其覆盖。

浮动导致的父容器高度塌陷是指什么？为什么会产生？有几种解决方法？

---

浮动后元素脱离文档流，父容器没设置高度的话，就没有人撑开他了，所以塌陷了。

解决方法：

1.父元素也float

2.加一个div ,类为clear：both

3.父元素overflow设置为BFC

4.使用：after

以下代码每一行的作用是什么？ 为什么会产生作用？ 和BFC撑开空间有什么区别？

---

.clearfix:after{                                            添加伪类

    content:'';                                               生成一个空元素作为最后一个元素

   display:block;                                          生成块级元素独占一行

   clear:both;                                               闭合浮动

}

.clearfix{

*zoom:1;                                                     兼容早期IE的hasLayout，清除浮动

}

这个方法相当于

.clear{

clear:both;

}

在容器最后添加了一个块级元素，使其闭合浮动

与BFC的区别是，BFC把自己弄成了BFC，而这个只是闭合浮动，没有形成BFC，而且闭合浮动不能使浮动元素回到原来的BFC之中。

代码

---

任务10更改前

任务10更改后

任务11-1

任务11-2