任务10

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

• 浮动元素的特征：CSS的浮动更准确的说是水平浮动.浮动元素可以左浮动或者右浮动，设置浮动之后元素会脱离普通文档流，直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。任何元素都可以浮动，浮动元素会生成一个块级框，而不论它本身是何种元素。
• 对父容器：浮动元素会脱离正常文档流，所以他不能撑开父元素，容易造成父元素的塌陷。
• 对其他浮动元素：如果是相同方向浮动的元素，会按顺序向浮动方向排列，如果不同方向，则会往两边排列，如果父元素的空间不足以一排容纳，则会顺延到下一排，如果浮动元素的高度不同,那么向下移动的时候可能被卡住。
• 对普通元素：因为脱离了普通文档流，普通元素会感觉不到浮动元素的存在。
• 对文字：文本内容会受到浮动元素的影响,会移动以留出空间.用术语说就是浮动元素旁边的行框被缩短,从而给浮动元素流出空间,因而行框围绕浮动框。

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

• 清除浮动指的是解决因为浮动的原因导致的父容器塌陷的问题。
• 方法一：在浮动元素之后添加一个DIV，然后对其设置clear:both；属性，来完成清除浮动，缺点是增加了一个无意义的标签。
• 方法二：使父元素形成BFC。（例如：对父元素添加overflow:hidden属性。）
• 方法三：在最后一个元素后添加一个after伪类，然后再伪类中设置clear:both属性，效果和方法一一样，但是不会增加一个无意义的标签，相对来说用的最多的一种方法。

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

• 相对定位:对元素设置position:relative;便是对元素设置相对定位，表示相对于元素本身正常位置进行定位，正常文档流中的其他元素会感觉元素还在原来位置，不会进行变动。
• 绝对定位:对元素设置position:absolute;便是对元素设置绝对定位，他是相对于static定位以外的第一个祖先元素（offset parent）进行定位,元素的位置通过 left, top, right 以及 bottom 属性进行规定。
• static正常定位:默认值，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
• 固定定位:position:fixed属性是固定定位，也是相对于浏览器窗口进行绝对定位。元素的位置和绝对定位一样通过 left, top, right 以及 bottom 属性进行规定。

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

• z-index 属性指定了一个元素及其子元素的 z-order。 当元素之间重叠的时候，z-order 决定哪一个元素覆盖在其余元素的上方显示。
• z-index的值只在同级元素之间才会影响，对于同级元素，position不为static且z-index存在的情况下z-index大的元素会覆盖z-index小的元素，即z-index越大优先级越高。对于不是同级元素，z-index不影响堆叠顺序。
• 如何使用：只要是position的值不为static的话即可设置z-index.

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

• 二者区别为:position:relative不会改变普通文档流之中其他元素的位置，其他元素还是会认为设置了position:relative的元素在原来的位置，但是设置marin来让元素移动，会占用移动后的和移动前的空间，也会影响后面的元素的位置。

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

• BFC的全称是 Block Format Content，中文翻译为块级格式化上下文。从样式上看，具有 BFC 的元素与普通的容器没有什么区别，但是从功能上，具有 BFC 的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器没有的一些特性，例如可以包含浮动元素。
• 满足下面任一条件的元素，会触发为 BFC ：
  1.浮动元素，float 除 none 以外的值
  2.绝对定位元素，position（absolute，fixed）
  3.display 为以下其中之一的值 inline-blocks，table-cells，table-captions
  4.overflow 除了 visible 以外的值（hidden，auto，scroll）
• BFC的比较常用的一个作用是清除浮动：

image.png

子元素因为设置了浮动，所以父元素塌陷了。

image.png

对父元素设置overflow:hidden;形成BFC，清除浮动。

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

• 块元素的顶部外边距和底部外边距有时被组合(折叠)为单个外边距，其大小是组合到其中的最大外边距，这种行为称为外边距塌陷(margin collapsing)，有的地方翻译为外边距合并。
• 发生外边距塌陷的三种基本情况:
  1.相邻的两个兄弟元素之间的外边距会塌陷（除非后者兄弟姐妹需要[清除过去的浮动]）。
  2.块级父元素与其第一个/最后一个子元素，如果中间不存在边框、内边距、内联元素、清除浮动这四条属性，那么，块级父元素和其第一个/最后一个子元素就会发生外边距合并的现象。
  3.如果存在一个空的块级元素，其 border、padding、inline content、height、min-height都不存在。那么此时它的上下边距中间将没有任何阻隔，此时它的上下外边距将会合并。
• 外边距合并的规则：如果合并的外边距都是正值或者负值，那么边距会取其中绝对值最大的一个作为合并的边距，如果合并的外边距为一正一负，那么合并的边距为两个正负边距的值相加。
• 形成BFC的话会阻止外边距合并。

• 父子外边距合并范例:

  
  image.png
  

  可以看出此时因为父子元素之间并没有边框、内边距、内联元素、清除浮动这四条属性，上边距已经合并了。

image.png

设置浮动属性之后，外边距合并消失。当然如果设置边框、内边距、内联元素其他任何一种，外边距合并也会消失。综合考虑是：设置对网页影响最小的一个因素。