任务10

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

• 浮动模型是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。
• 浮动元素会脱离普通流，如果父容器中的元素都浮动，则会造成父元素高度塌陷，即父元素高度为0。
• 浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样。
• 浮动元素后面框的文本内容会受到浮动元素的影响,会移动以留出空间。即浮动元素旁边的行框被缩短,从而给浮动元素流出空间,因而行框围绕浮动框。

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

• 清除浮动指的就是解决浮动时造成的父元素高度塌陷问题。
• 在父元素的末尾添加一个无意义的空标签，使其clear = both。
• 利用BFC清理浮动。BFC可以包含浮动，因此只需让父元素形成BFC，即可包含父元素中的浮动元素。例如将父元素样式设置为overflow = hidden或display = inline-block等，都可让父元素形成BFC。
• 使用通用的清理浮动方案，无副作用：

.clear::after {
    content: "";
    display: block;
    clear: left;
}
.clear::after {
    content: "";
    diaplay: table;
    clear: both;
}

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

• relative：相对于元素本身正常位置进行定位, 其原来在文档流中的空间会进行保留。因此在对图标位置进行微调时，可使用相对定位。
• absolute：相对于距离最近的非static元素进行定位，如果没有非static元素，则相对于根元素html进行定位。两栏布局或者清理浮动时都可以考虑使用局对定位。因为绝对定位元素会脱离文档流，所以绝对定位的元素可以覆盖页面上的其他元素。
• fixed：相对于视口的左上角进行定位，也会脱离文档流。当对页面的顶部导航使用固定定位后，在用户滚动页面时，导航条会一直停留在视口顶部。一些广告弹窗，或回到顶部按钮也会使用固定定位。

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

• 设定了定位元素及其子元素的堆叠顺序。
• 拥有更高堆叠顺序的元素一般情况下会处于堆叠顺序较低的元素的前面。更详细的可以参考我的博客理解CSS：z-index

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

都可以使元素位置发生偏移。position:relative不会影响文档流中的其他元素的位置，而负边距则会对其他元素产生影响。

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

• BFC(Block formatting context)直译为"块级格式化上下文"。 它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。
• 满足下列条件之一就可触发BFC：
  （1）float的值不为none
  （2）position的值不为relative
  （3）overflow的值不为visible
  （4）display的值为inline-block、table-cell、table-caption、flex或inline-flex
• 举例：
  （1）BFC阻止垂直外边距折叠
  （2）BFC包含浮动，可防止父元素高度塌陷
  （3）BFC可以使行内不围绕浮动元素

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

• 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者（或者正负边距的加和）。
• 生成 BFC 的元素不会和在流中的子元素发生空白边折叠。

• 父子外边距合并：

  
  task10.png
  task101.png