关于浮动

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

浮动元素：浮动元素的框可以向左或者向右移动，直到它的外边缘碰到父元素包含框或者另一个浮动元素的边框为止；浮动元素不在文档普通流之中，因此文档普通流中的块级元素感知不到浮动元素的存在。

对父容器的影响：不与父容器发生外边距合并。无法撑开父元素。

对其他浮动元素的影响：父容器足够宽，与其他浮动元素同一水平方向依次排列。父容器宽度在同一水平方向上不能同时容纳全部浮动元素时，超出父容器宽度的浮动元素向下移动,直到有足够的空间,如果水平排列三个以上高度不同浮动元素，那么向下移动的时候可能被卡住。

对普通元素的影响：浮动元素之前的普通元素不受影响。浮动元素之后的普通元素因感知不到浮动元素的存在会被浮动元素覆盖。

对文字的影响：文字所在行框因为浮动元素的挤压而缩短，从而围绕浮动元素排列。

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

清除浮动指：消除浮动元素对其他元素因浮动元素造成的高度塌陷的问题。

清除浮动的方法：

• 设置操作元素属性clear: both或者clear: left或者clear: right；
• 使父容器形成BFC。父容器成为BFC后，父容器将不会出现高度塌陷的问题。

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

三种定位方式：

• relative 相对定位。元素不脱离文档流。参考点：自身在文档流中的位置。使用场景：一般作为绝对定位的元素参考点，或者页面图片的小偏移。
• absolute 绝对定位。元素脱离文档流。参考点：距离最近的非static祖先元素位置。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块html来定位。使用场景：元素的水平垂直居中。
• fixed 固定定位。元素脱离文档流。参考点：参考浏览器窗口的位置。使用场景：相对于浏览器窗口位置始终不变的显示窗口，比如：固定边栏和底栏。

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

因为绝对定位的元素脱离了普通流，所以绝对定位的元素可以覆盖页面上的其它元素。这时可以通过给元素设置z-index属性来控制叠放顺序，该属性值越高，元素位置越靠上。

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

• position:relative 只相对自己原本位置发生偏移，不影响其它普通流中元素的位置。
• margin：除了让元素自身发生偏移还影响其它普通流中的元素。

6、BFC 是什么，为什么要使用它？如何生成 BFC？BFC 有什么作用？举例说明

1、BFC就是“块级格式化上下文”的意思，创建了 BFC的元素就是一个独立的盒子，不过只有Block-level box可以参与创建BFC， 它规定了内部的Block-level Box如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。

使用一定的CSS声明可以生成BFC，浏览器对生成的BFC有一系列的渲染规则，利用这些渲染规则我们可以达到一定的布局效果，为了达到特定的布局效果我们让元素生成BFC。

BFC的特性：

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

2、如何生成BFC：

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

3、BFC有什么作用：

• 1、解决margin重叠问题；
• 2、用于布局；
• 3、用于清除内部浮动，计算BFC高度。