浮动定位（BFC、边距合并）

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

• 浮动元素不在文档的普通流中，它可以根据float属性值而左右移动，直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘才停止移动。

• 对父容器的影响：如果父容器的子元素都是浮动元素，那么父容器会失去高度，在浮动元素之外。视觉上，父容器没有包含住浮动的子元素。

• 其它浮动元素的影响：如果包含块太窄无法容纳水平排列的全部浮动元素，那么其它浮动元素会向下移动，直到有足够的空间，而如果浮动元素的高度不同，那么向下移动的时候可能会被卡住。

• 普通元素的影响：普通元素会视浮动元素不见，占据浮动元素原有的位置，但会被浮动元素遮罩。
  对文字的影响：文字会感知到浮动元素的存在，会留出空间，形成环绕效果。

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

• 清除浮动是指如何让一个没有高度的div中两个元素浮动后，div的高度为0的父盒子重新包含子元素

• 清除浮动：

• 添加额外标签设置clearfix类为clear:both;
  　　原理是这个空的div能让父级获取到高度，是因为设置之后这个div的左右都不能有浮动元素，所以这个空的div元素会向下移动，直到换行，而为了让这个div能够换行，父元素至少要包含浮动元素的高度才能提高足够的空间，这样实现清除浮动的影响

PS:clear:left|right是指清除左边左浮动的元素（或者右边右浮动的元素）

• 设置父元素为浮动元素

*设置position:absolute

• overflow:hidden

• 父级div定义伪类:after和zoom;
  .clearfix:after {
  content:'';
  display:block;
  clear:both;
  }
  .clearfix {
  *zoom:1;
  }

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

• 有6种定位方式：

• inherit：从父元素继承；

• static：默认值，没有定位，元素出现在正常的文档流中。参考点是文档流中的位置。

• relative：相对定位。相对于元素本身正常位置进行定位，通过top、bottom、left、right属性来设置偏移量。使用场景：为绝对定位设定参照物或对元素自身位置进行局部调整。

• absolute：绝对定位。相对于static定位意外的第一个祖先元素进行定位，若都没有发现则以html标签为参考进行定位。使用场景：当想让元素参照特定参照物进行定位时使用。

• fixed：固定定位。生成绝对定位元素，相对于viewport进行定位。

• sticky：对象在常态时遵循普通流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。

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

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

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

• position:relative;还占据原来的位置，只是相对自己原本位置发生偏移，不影响其它普通流中元素的位置。

• margin：除了让元素自身发生偏移还影响其它普通流中的元素位置。

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

• BFC是块级格式上下文。其定义是：浮动、绝对定位（绝对定位、固定定位）元素、块级容器（如inline-block、 table-cell、table-caption）并不是块级盒子，还包括哪些overflow属性值取值visible以外的块级盒子，会为它们的内容物创建一个新的块级格式化上下文。对元素设置以下属性就可以生成BFC：
  float: left | right;
  overflow: hidden | auto | scroll;
  display: table-cell | table-caption | inline-block;
  position: absolute | fixed;

• 特性：

• BFC会阻止垂直外边距（margin-top、margin-bottom）折叠

• 按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。

• 因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠

• BFC不会重叠浮动元素

• BFC可以包含浮动

• BFC的作用有：
  （1） 解决margin重叠问题。所谓margin重叠是指处于同一个BFC的相邻元素、嵌套元素，只要它们之间没有阻挡（如：边框、非空内容、padding等）就会发生margin重叠。这是只要让其中一个元素生成新的BFC就能解决margin重叠问题。
  （2） 清除浮动。因为BFC可以包含浮动，所以让父容器生成新的BFC可以让父容器在视觉上包围了浮动的子元素，因而清除了浮动
  谈谈BFC与ie特有属性hasLayout
  CSS布局基础——BFC

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

• 相邻的两个盒子和嵌套的盒子会出现外边距合并

• 合并规则

• 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

• 相邻的两个盒子上下边距合并，如图

相邻.png

• 解决办法：

  
  

  

  相邻2.png

相邻3.png

• 嵌套元素margin合并，如图：

  
  

  

  嵌套.png

• 解决办法：

  
  

  

  嵌套1.png

  
  

  

  嵌套2.png

  
  

  

  嵌套3.png

  
  

  

  嵌套4.png

8.代码题

任务一

• 关键点在于利用浮动的特性，把<span>x</span>放在第一位就可以把第二位块元素覆盖，而不用定位去做

任务二

• 关键点在pidding，运用padding将input撑大，加上overflow:auto就可以做出下方有滑动栏的效果

任务三

• 关键点两点

  • 利用固定定位将背景撑开固定在浏览器展示位置

    .modal {  position:fixed;  top: 0;  right: 0;  bottom: 0;  left: 0;  background-color: rgba(0,0,0,0.3);
    }

  • 在不知道盒子宽高的情况下，可以使用transform:translate(-50%,-50%); 当margin-top,margin-lfet的居中法使用
    .modal .panel {
    position:absolute;
    top:50%;
    left:50%;
    width: 600px;
    transform:translate(-50%,-50%);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2),0 4px 20px rgba(0,0,0,0.19);
    }

作者：饥人谷_米弥轮
链接：https://www.jianshu.com/p/cc90307c60a5