task 11

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

1. 父子外边距合并：父元素无边框，和子元素相邻。
   如果父元素有边框，或有内边距则不会出现合并；

2. 相邻元素间的合并：有外边距则会合并；
   设置元素为float,inline－block,overflow:auto(BFC)则可以消除合并。

   
   
   

   Paste_Image.png

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

1. 设置font-size:0;
2. 去除inline-block元素标签间因空格回车产生的间隔；
3. 设置浮动；
4. 使用负margin；

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

形成BFC，计算了浮动元素的高度。

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

BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
形成BFC的条件：
1.根元素
2.float属性不为none
3.position为absolute或fixed
4.display为inline-block, table-cell, table-caption, flex, inline-flex
5.overflow不为visible
BFC的作用
1.防止margin重叠
2.清除内部浮动
3.防止与float元素重叠

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

原因：浮动元素脱离了文档流，父容器感知不到内部元素的存在。
解决办法：父容器形成BFC；在浮动元素后加入使用了clear：both的伪元素（内容为空）如:after。

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

Paste_Image.png

代码题

code1
code2