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

• 先了解什么是文档流： 文档是html元素在页面中排列布局的方式，块状元素自上到下排列，行内元素由左到右排列。
• 浮动（float）： 可以让元素脱离文档流，浏览器渲染时感知不到它的存在，就好像浮在上面的感觉！浮动的值有：float： top | right | bottom | left; 对一个元素进行的float设置，可以对其上、右、下、左设置。
• 浮动的定义（w3c）: 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
• 影响：
  -父容器：父容器框就是浮动元素的包含框就是浮动框碰到它就会停止。

Paste_Image.png

对父元素的所有子元素进行了浮动，其内容会塌陷(如下图所示)

Paste_Image.png

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

浮动的特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。
-方法：
1.添加空标签
2.父元素设置overflow：hidden；

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

• 相对定位（position：relative；）： 相对其元素本身进行定位，原来所占据的文档流位置不变，紧紧是可视化排列布局发生了位置便宜；可对top、right、left、bottom进行设置。
• 绝对定位（position：absolute；） ：相对于第一个非static父元素进行绝对定位；如果一直没有找到父元素，则根据根节点html元素进行定位，对于设置绝对定位的元素脱离了文档流，可对top、right、bottom、left进行设置。
• 固定定位（position： fixed；）：相对窗口（viewport）进行定位；脱离文档流，可对top、right、bottom、left进行设置。

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

所有浏览器都支持z-index属性，其设置的是元素的堆叠顺序，拥有更高的堆叠顺序的元素处于拥有低顺序的前面，可设置为负的。

• 只有在定位的情况下才能用：
  position：relative；
  position： absolute；
  position：fixed；

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

position:relative:

Paste_Image.png

负margin：

Paste_Image.png

Question6：如何让一个固定宽高的元素在页面上垂直水平居中?

Paste_Image.png

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

• BFC即Block Formatting Context的缩写，中文译为块级格式化上下文。它是一个独立渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

• BFC布局规则：
  1.内部的box会在垂直方向一个接一个地放置。
  2.box垂直方向的距离有margin决定。属于同一个BFC的两个相邻box的margin会发生重叠。
  3.每个元素的margin box的左边，与包含块border box的左边相互接触。即使浮动也是一样。
  4.bfc就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也是如此。
  5.bfc区域不会与float box重叠。
  6.bfc就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也是如此。
  7.计算bfc的高度时，浮动元素也参与计算。

• 能生成BFC的元素：
  1.根元素 html
  2.float属性不为none
  3.position为absolute或者fixed
  4.display为inline-block ,table-cell,flex,inlin-flex,(flex是弹性布局的意思)
  5.overflow不为visible

• 作用：
  1.自适应两栏布局
  第一栏设置了浮动，两栏局域发生了重叠，要让第二栏不与浮动元素重叠，把它变为BFC即可.

  
  
  Paste_Image.png

Paste_Image.png

2.清除内部浮动，解决父元素高度塌陷问题

父元素中两个子元素都发生了浮动

让父元素变成BFC解决高度塌陷问题

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

-同在一个BFC内的元素垂直外边距会发生合并；

垂直外边距合并

-让其中一个被一个BFC块包裹着独立出来

解决垂直外边距合并问题

Question9：实现如下效果，每种效果都用一个标签来实现

Question10：实现如下导航条