浮动定位BFC边距合并

2017-05-05 本文已影响0人 8d2855a6c5d0

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

浮动元素不在文档的普通流中，它可以根据float属性值而左右移动，直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘才停止移动。
对父容器的影响 如果一个没有设置高度元素的所有子元素都是浮动元素，那么父级元素将会失去高度，视觉上父元素没有包裹住浮动元素塌陷下去。
对浮动元素 浮动元素会依次排列，当排列元素的宽度超过父元素的宽度时，浮动元素会从下一行开始依次pailie
普通元素 由于浮动元素已经脱离了文档流，普通元素遇到浮动元素会视而不见，占据浮动元素的位置，但会被浮动元素遮住。
对文字 文字会感知到浮动元素的存在，会留出空间，形成环绕效果。

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

清除浮动指：消除浮动元素对其他元素因浮动元素造成的高度塌陷的问题。
清除浮动方法：
- 利用clear特性来清除浮动,写一个空标签加上 clear属性放在父元素的内部达到清除浮动的效果，一般实际运用中写成伪元素的形式方便使用。

.clearfix::before,
.clearfix::after {
    content: '';
    display: block;
    clear: both;
    line-height: 0;
    height: 0;
    visibility: hidden;
}

利用BFC的可以包含浮动元素的特性，使父级重新生成BFC来清除浮动，如何触发BFC具体参见问题6。

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

inherit：继承父元素定位属性。
static：默认值，没有定位，元素出现在正常的文档流中。参考点是文档流中的位置。
relative：相对定位。相对于元素本身正常位置进行定位，通过top、bottom、left、-
right属性来设置偏移量。使用场景：为绝对定位设定参照物或对元素自身位置进行局部调整。
absolute：绝对定位。相对于static定位意外的第一个祖先元素进行定位，若都没有发现则以html标签为参考进行定位。使用场景：当想让元素参照特定参照物进行定位时使用。
fixed：固定定位。生成绝对定位元素，相对于viewport进行定位。
sticky：对象在常态时遵循普通流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。兼容性不佳，不常用。

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

z-index指定了非static元素显示的优先级，z-index较大的那个覆盖在较小的那个元素上。使用方式为设置一个整数值。

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

position:relative是相对于自身在文档流的位置发生偏移，原本所占有的位置不会被其他元素占据，外形发生了移动但本身的位置是不动的；而负margin则文档流的位置会发生偏移，会让后面的元素也发生位置的偏移。

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

BFC 定义 　BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
如何触发BFC

float属性不为none
position属性为absolute、fixed
display属性为 inline-block、table、table-cell、table-capation、flex、inline-flex.
overflow属性不为visible
display: flow-root(触发BFC，没有任何副作用，缺点是新属性兼容有问题)

BFC 有什么作用？举例说明

BFC会阻止垂直外边距（margin-top、margin-bottom）折叠
- 按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。
- 因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠

2.BFC不会重叠浮动元素

3.BFC可以包含浮动元素，也就是计算BFC高度时，浮动元素也会参与计算

参考文章

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

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
（1）两个兄弟元素在垂直方向上合并外边距，取较大值进行合并。

#d1 {
  width:100px;
  height:100px;
  margin-bottom:30px;
}
#d2 {
  width:100px;
  height:100px;
  margin-top:10px;
}

<div id="d1">
</div>

<div id="d2">
</div>

这时两个div在垂直距离上的外边距进行了合并，合并后的值是30px。
（2）父子元素间没有阻挡（如：边框、非空内容、padding等）时发生上和/或下外边距合并。

<div class=”parent”>
    <div class=”child”>
    </div>
</div>

.parent{
    width: 200px;
    height: 100px;
    margin-top:10px;
    background-color: red;
}
.child{
       width: 100px;
       height: 100px;
       margin-top:30px;
       background-color: yellow;
 }

（3）外边距自己和自己合并
如果一个元素没有边框和填充，但有上下外边距，这时它的上下外边距会合并。

#d1 {
  margin-top:50px;
  margin-bottom:20px;
}
<div id="d1">
</div>

这时上下外边距合并成50px。
除此之外，若该元素垂直方向上的兄弟元素也有外边距，那么垂直方向的外边距依旧会发生合并。

#d1 {
  margin-top:50px;
  margin-bottom:20px;
}

#d2 {
  width:100px;
  height:100px;
  margin-bottom: 80px;
}
<div id="d2">
</div>
<div id="d1">
</div>

这时，外边距合并成80px。
如何解决边距重叠

给对应元素加上阻挡（例如border，非空内容，padding等）

2.利用 BFC会阻止垂直外边距折叠的特性，将对应元素转换为BFC来解决边距重叠。