任务10

1.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?

image.png

2.清除浮动指什么? 如何清除浮动? 两种以上方法

清除浮动指的是清除浮动给父元素和邻近元素的副作用
方法：

• 给父元素手动添加高度
• 通过clear属性来清除浮动
• 给父元素添加overflow(scroll,auto,hidden)样式（overflow 除了visible 以外的值）
• 给父元素添加浮动样式
• 给父元素添加display (table-cell，table-caption，inline-block, flex, inline-flex)样式
• 给父元素添加position值为（absolute，fixed）样式

3.有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？

共有5种，如下图所示

image.png

image.png

image.png

image.png

4.z-index 有什么作用? 如何使用?

z-index 属性设置元素的堆叠顺序。元素中拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。（这里要注意，要以相同的祖先元素定位时，z-index越大，其位置越在上方）
并不是z-index越大，其就在最上面，如下图所示

image.png

image.png

结果是：

image.png

原因：由于div1，div2，div3，div4都是position:absolute;故div1和div4是以body为祖先元素定位，div4的z-index大于div1，而div2和div3是以div1为祖先元素进行定位，所有不论div2和div3的z-index为多大，都在div4的下面

5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别

position:relative;是使用相对定位来使元素发生偏移，用right，left，top，bottom来进行定位，相对于元素的常规流位置。并且相对定位的元素不会脱离常规流（即是原来的位置空下来，也不会被其他元素占据）
负 margin 使元素发生偏移时，元素原来占据的空间会随着负 margin 数值的增大而减少，其他元素的位置也会发生相应的变化

6.BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的块级格式化上下文

• float 除了none以外的值
• overflow 除了visible 以外的值（hidden，auto，scroll ）
• display (table-cell，table-caption，inline-block, flex, inline-flex)
• position值为（absolute，fixed）

BFC特性：

• 内部的Box会在垂直方向，从顶部开始一个接一个地放置。
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
• 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此
• BFC的区域不会与float box叠加。
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
• 计算BFC的高度时，浮动元素也参与计算。

BFC可以用来解决以下问题：

• margin叠加问题
• 用于布局
• 清除浮动

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

当元素属于同一个BFC时，会出现外边距合并
外边距合并规则：

• 当两个margin为正数时，取大的
• 当两个margin为负数时，取绝对值大的那个，然后从0开始负向位移
• 当有正有负时，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。
• 所有毗邻的margin要一起参与运算，不能分步进行。

不让相邻元素外边距合并方法：
1.只设置一个方向上的margin，例如都只设置margin-top
2.将其中一个元素设置为BFC来取消合并
不让父元素外边距合并方法：
1.可以将父元素设置 BFC
2.可以在子元素的 margin 和 父元素的 margin 之间增加 padding 或 border 来隔开它们
父子外边距合并范例

代码练习

效果1

效果2

效果3

效果4