浮动定位BFC边距合并

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

• 浮动元素的特征：
  1. 浮动元素会脱离正常文档流，文档流中的其他正常块级元素将不再感知浮动元素的存在；
  2. 浮动元素会向左或向右移动，直到碰到父元素的边框或其他的浮动元素为止。
• 对父容器的影响：浮动元素会引起父容器的高度塌陷问题。
• 对其他浮动元素的影响：当有多个元素浮动时，浮动元素会按浮动方向的顺序依次排列，当父容器的宽度不够容纳所有的浮动元素时，超出父容器宽度的浮动元素将被挤下去，如果某个浮动元素的高度超出其他浮动元素，被挤下去的浮动元素会被这个更高的浮动元素卡住。
• 对普通元素的影响：由于浮动元素会脱离正常的文档流，其他的普通元素将不再感知浮动元素的存在，原本排列在浮动元素后面的元素将占据浮动元素所占的位置，浮动元素也将覆盖在普通元素的上方。
• 对文字的影响：与普通元素不同，文字仍然能够感知到浮动元素的存在，所以文字将围绕浮动元素排列。

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

清除浮动指通过clear属性解决浮动元素的父容器的高度塌陷问题。
清除浮动的方法：

1. 在父容器最后添加一个空的<div>，对其使用clear属性，清除浮动；
2. 创建BFC，由于BFC包含浮动的特性，可以达到清除浮动的效果。
   两种方法各有优缺点，其中创建BFC又有很多种方法，每一种方法也有各自的优缺点，所以在清除浮动时一定要谨慎选择最适合的一种。

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

定位方式分为相对定位、绝对定位和固定定位。

• relative相对定位，是相对于自身在文档流中的位置，根据top/right/bottom/left值进行偏移，以实现定位，参考点是元素自身，使用场景是该元素需要保留在文档流中的位置时。
• absolute绝对定位，绝对定位元素会脱离文档流，所以其参考点是离它最近的position值不为static的上级元素，如果找不到，最后将参考html根元素，然后根据其top/right/bottom/left值进行偏移实现定位，使用场景是需要根据其父元素确定位置时。
• fixed固定定位，是以浏览器窗口为参考点，通过top/right/bottom/left值偏移确定位置的定位方式，使用场景是需要某个元素在浏览器窗口内固定位置不动时。

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

z-index属性可以控制元素的叠放顺序，z-index值越高，元素的位置越靠近使用者。

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

relative的偏移只是视觉效果上的偏移，元素本身的位置并没有发生变化，对其他元素的位置也不会产生影响。
而负margin会使元素的位置发生变化，对其他元素的位置也会产生影响。

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

BFC全称 Block formatting contexts ，即块级格式化上下文。
生成BFC可以通过以下几种方式：
1. 根元素；
2. float属性不为none；
3. display属性为inline-block、table-cell、table-caption之一；
4. overflow属性不为visible
5. position属性为relative、absolute、fixed之一。
BFC的作用：
1. BFC会阻止垂直外边距（margin-top、margin-bottom）折叠；
2. BFC不会重叠浮动元素；
3. BFC可以包含浮动。

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

当两个元素的垂直外边距相遇时，会合并成一个外边距。
合并后的外边距的大小取合并前两个元素的垂直外边距较大的一个。
根据BFC阻止垂直外边距折叠的特性，将相邻元素放在不同的BFC中，即可防止相邻元素外边距合并。
父子外边距合并的范例
通过范例可以看出，父元素.ct的外边距本应是50px，但由于其子元素.box的外边距是100px，父子外边距发生了合并，所以子元素紧贴父元素的上边，而父元素的上外边距变成了100px。