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

• 浮动元素不在文档的普通流中，它可以根据float属性值而左右移动，直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘才停止移动。
• 对父容器：如果父容器内的元素均设置了浮动且没有设置父容器的高度，那么他们脱离普通流无法撑起父容器的高度，导致父元素的塌陷。
• 对其它浮动元素：同一父容器内的浮动元素按照设定的方向并排排列，当父元素的宽度不够时，后面的元素会向下移动，直到有足够的空间；如果浮动元素的高度不同，那么有可能挡住移动的路径。
• 对普通元素：无法辨别普通元素，有可能导致覆盖其它普通元素，占据其位置。
• 对文字：文字能够识别浮动元素，会围绕浮动元素。

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

因为没有预先设置div高度，所以div高度由其包含的子元素高度决定。而浮动脱离文档流，所以子元素并不会被计算高度。此时的div中，相当于div中子元素高度为0，所以发生了父元素高度塌陷现象，而清除浮动就是指消除浮动元素对其父元素因浮动元素造成的高度塌陷的问题.

清理浮动一般有三种思路：

• 设置clear:both能清除浮动，并撑开父元素。(clear 属性规定元素的哪一侧不允许其他浮动元素。)
• 使父容器形成BFC。
• 父级div定义 伪类:after 和 zoom，原理类似上一种。

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

4 种不同类型的定位，这会影响元素框生成的方式。

• static
  元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
• relative
  元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
  参考点：自身在文档流中的位置。
  使用场景：一般作为绝对定位的元素参考点，或者页面图片的小偏移。
• absolute
  元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
  参考点：距离最近的非static祖先元素位置。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块html来定位。
  使用场景：元素的水平垂直居中。
• fixed
  元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
  参考点：参考浏览器窗口(视窗)的位置。使用场景：相对于浏览器窗口位置始终不变的显示窗口，比如：固定边栏和底栏

提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

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

z-index 属性指定一个元素的堆叠顺序。
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
z-index有三个属性：

• auto 默认。堆叠顺序与父元素相等。
• number设置元素的堆叠顺序。
• inherit规定应该从父元素继承 z-index 属性的值。

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

position:relative，元素显示位置发生变化，但是元素在文档流中的位置不变，不影响后面元素在文档流中的布局。
负margin，元素的显示位置和在文档流中的位置均发生变化，会影响后面元素在文档流中的位置。

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

块格式化上下文（block formatting context） 是页面 CSS 视觉渲染(visual CSS rendering)这个过程中的一个概念。它是决定块盒子的布局及浮动元素相互影响的一个因素。具有对内部元素的包裹性及对外部元素的独立性。

BFC有以下特性：

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

以下方式可以生成BFC：

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

由第二条特性，我们可以在解决margin叠加问题时用到BFC。

margin叠加

三P每个p之间的距离为50px，发生了外边距叠加。 要解决这个叠加问题即让每个P之间是100px，我们可以新建一个BFC，怎么建呢？可以给p元素添加一个父元素，让它触发BFC。如下:

解决margin叠加

由第六条特性，BFC可用于用于清除浮动。

高度塌陷

我们发现由于里面两个子元素浮动的关系，两个box已经脱离了父元素的包含块，父元素高度已经塌陷，我们需要让父元素包含两个box子元素，这样计算高度时，两个浮动子元素就会参与，所以我们要闭合浮动，触发父元素的BFC。

塌陷解决

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

外边距合并指的是，两个在普通文档流中的“相邻”元素外边距相遇的时候发生合并的情况。这个所谓的“相邻”可以是父子关系相邻，兄弟关系相邻，甚至如果一个元素内部没有东西，自身的上下边距相遇时都会发生外边距合并。

当两个外边距都是正数时，取两者之中的较大者；当两个外边距都是负数时，取两者之间绝对值较大者；当两个外边距一正一负时，取的是两者的和。

如果不想让相邻元素外边距合并，可以：

1. 浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠（注意这里指的是上下相邻的元素）
2. 创建了块级格式化上下文的元素，不和它的子元素发生 margin 折叠（注意这里指的是创建了BFC的元素和它的子元素不会发生折叠）BFC的因素是float（除了none）、overflow（除了visible）、display（table-cell/table-caption/inline-block）、position（除了static/relative）

父子外边距合并

代码

1. 实现如下代码效果
2. 实现如下表单效果
3. 实现如下模态框效果
4. 实现如下导航栏效果