浮动定位BFC边距合并

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

浮动，在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”。

文档流：在html中文档流即为元素从上至下排列的顺序。
脱离文档流：元素从正常的排列顺序被抽离。
最左边/最右边：上述的移动到父元素最左和最右是指元素往左或往右移动直到碰到另一个浮动元素或父元素内容区的边界（不包括padding）。

• 对其父元素的影响
  对于其父元素来说，元素浮动之后，它脱离当前正常的文档流，所以它也无法撑开其父元素，造成父元素的塌陷。
• 对其他浮动元素的影响：
  如果父元素的宽度不够，父容器里的其他浮动元素会向下移动，直到位置足够放下。（如果浮动元素的高度不同，向下移动的元素就会被比它高的元素卡住）
• 对普通元素的影响：
  文档流中的普通元素察觉不到浮动元素，但是其文本内容却能察觉到浮动元素，呈现出围绕浮动元素排列的表现方式。

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

• 清除浮动是指清除浮动元素对当前元素的影响。
  如何清除：
  1、添加新的元素，应用clear：both
  2、父级div定义 overflow:hidden

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

• inherit：继承父元素定位属性。
• inherit ：规定应该从父元素继承 position 属性的值。
• static：默认值,没有定位，元素出现在正常的流中
• relative：生成相对定位的元素，相对于元素本身正常位置进行定位。
• absolute生成绝对定位的元素，相对于static定位以外的第一个祖先元素进行定位,元素的位置通过 left, top, right以及 bottom 属性进行规定。
• fixed生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定。

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

• z-index：其实从字面上已经可以解释；z是从x、y以后的第三个轴，从网页上表现就是除了上下左右外的前后。通过给元素设置z-index属性来控制叠放顺序，该属性值越高，元素位置越靠上。
  z-index属性只能够应用在display属性为relative、absolute或fixed的元素上。

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

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

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

• BFC是什么？
  BFC 即 Box Formatting Context
  1、Box:
  CSS布局的对象和基本单位，直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。
  有哪些盒子：
• block-level box:
  display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；
• inline-level box:
  display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；
  2、Formatting context：
  Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
  最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。
  CSS2.1 中只有 BFC 和 IFC，CSS3中还增加了 GFC 和 FFC。

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的区域不会与float box重叠。
5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6、计算BFC的高度时，浮动元素也参与计算

哪些元素会生成BFC?

1、根元素
2、float属性不为none
3、position为absolute或fixed
4、display为inline-block, table-cell, table-caption, flex, inline-flex
5、overflow不为visible

BFC的作用：

1、自适应两栏布局

01.jpg

2、清除内部浮动

02.jpg

3、防止垂直 margin 重叠

03.jpg

总结：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

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

• 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
• 如何不让相邻元素外边距合并：
  可以把相邻元素放在不同的BFC中即可阻止外边距合并。
  父子元素外边距合并则可以给父元素设置border或者padding或者让父元素成为BFC元素。
  父与子外边距合并：

00.png