浮动 定位 BFC 边距合并

[HarleyWang93]

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

浮动元素是什么？

• 浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样。

浮动元素的特征

1. 不占据普通文档流的空间。
2. 浮动元素的左（右）外边界不能超过其包含块的左（右）内边界。
3. 浮动元素的左（右）外边界必须是源文档中之前出现的左浮动（右浮动）的元素的右（左）边界，除非后出现浮动元素的顶端在先出现浮动元素的底端下面。
4. 左浮动元素的右外边界不会在其右边浮动元素的左外边界的右边。一个右浮动元素的左外边界不会在其左边任何左浮动元素的右外边界的左边。
5. 一个浮动元素的顶端不能比其父元素的内顶端更高。
6. 浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高。
7. 如果文档中一个浮动元素之前出现另一个元素，浮动元素的顶端不能比包含该元素所生成的框的任何行框的顶端更高。
8. 如果浮动元素出现在另一个浮动元素的旁边，而因此可能导致超出包含块的话，这个浮动元素会向下浮动到之前浮动元素下面的某一点。
9. 浮动元素必须尽可能高地放置。
10. 左浮动元素必须向左尽可能远，右浮动元素必须向右尽可能远。
11. inline 元素设置浮动，改变 inline的display使得它像个block-level
12. 在重叠上，浮动元素会遮盖block-level元素的背景，不会遮盖inline元素。

内边界:指盒模型中的content边界。外边界：指盒模型中的margin边界。

影响

• 非BFC的正常文档流父元素会"感受"不到浮动元素的存在，从而产生"高度塌陷"。
• 其他浮动元素会"察觉"到浮动元素的存在按照从左到右的"正常文档流"排列。
• 普通元素(非inline-level)会无视浮动元素的存在,从而占据浮动元素的"原来的位置"。
• 文字(也既inline-level)级的元素会环绕浮动元素，表现的像是察觉到浮动元素一样。

清除浮动指什么? 如何清除浮动?

• 清除浮动指元素的侧边不允许出现浮动元素，从而使得浮动元素的不占据普通文档流空间的使得父元素的高度塌陷问题得到解决，主要通过clear属性实现。

• clear:指定一个元素是否可以在它之前的浮动元素旁边，或者必须向下移动(清除浮动) 在它的下面。clear 属性适用于浮动和非浮动元素。

• 当应用于非浮动块时，它将非浮动块的边框边界移动到所有相关浮动元素外边界的下方。这个行为作用时会导致margin collapsing不起作用。

• 当应用于浮动元素时，它将元素的外边界移动到所有相关的浮动元素外边界的下方。这会影响后面浮动元素的布局，后面的浮动元素的位置无法高于它之前的元素。

方法：

• 设置浮动包含块的父元素height值
• 使得含块的父元素变成 BFC
• 通过添加:after伪元素，然后在伪元素上设置clear属性来实现

利用伪类:after清除 (推荐使用)

.clearfix{ *zoom:1; } /*兼容IE6、7 (现在基本上不用写这行了，基本淘汰了)*/    
.clearfix:after { 
    content:"";
    display: block;
    clear: both;
}

利用空标签清除

• 在 HTML 中，在浮动元素的后面添加一个空的块标签，并设置clear属性
• 缺点：会增加一个无意义的 HTML 标签

利用 BFC 清除浮动

• 使用 css 属性为父元素创建新的 BFC,利用 BFC 可包含浮动元素的特性来清除浮动
• 缺点：BFC 并不是专门用来清除浮动的，创建 BFC 时，还会有各种副作用。例如：float影响整体布局，overflow:hidden影响内容的展示等等

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

• inherit 从父元素继承position属性的值 一般不用
• static默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
• relative 生成相对定位的元素，相对于元素本身正常位置进行定位 属性值：left, top,right ,bottom 应用于对其自身进行细微调整
• absolute 生成绝对定位的元素，相对于static定位以外的第一个祖先元素（offset parent）进行定位 属性值：left, top,right ,bottom
• fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。 属性值：left, top,right ,bottom 需要一直停留在窗口的元素，例如
• sticky 兼容性较差，一般用 JS 实现 新的 CSS3 属性，它的表现类似`position:relative和position:fixed的合体，目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。 注意:如果同时定义了left和right值，且width和height有值，那么left生效，right无效。同样的，同时定义了top和bottom，top生效。

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

• z-index规定了元素在 Z 轴（距离用户远近）上的顺序，值越大则越靠近用户，表现就是元素在最上面。

• z-index仅在设置了position非static属性的元素生效，且z-index的值只能在兄弟元素之间比较。

• Z-index默认值为auto,则不建立层叠上下文。设置为 0 则会建立层叠上下文。

深入理解CSS中的层叠上下文和层叠顺序

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

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

BFC 是什么？如何生成 BFC？BFC 有什么作用？

BFC： 块格式化上下文 ( block formatting context 、Block Format Content ) 是 Web 页面的可视 CSS 渲染的一部分，是一种显示渲染规则。它是块盒子的布局发生及浮动体彼此交互的区域。

首先 BFC 是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。

形成条件：

• 根元素或其它包含它的元素
• 浮动 (元素的 float 不是 none)
• 绝对定位的元素 (元素具有 position 为 absolute 或 fixed)
• 内联块 inline-block (元素具有 display: inline-block)
• 表格单元格 (元素具有 display: table-cell，HTML 表格单元格默认属性)
• 表格标题 (元素具有 display: table-caption, HTML 表格标题默认属性)
• 块元素具有overflow ，且值不是 visible
• display: flow-root

  简而言之

• 设置float:left|right
• 设置overflow：hidden|auto|scroll
• 设置display:inline-block|table-caption|table-cell
• 设置position：absolute|fiexd
• 上面都是比较常见的，也就是说，每次看到这些属性的时候，就代表了该元素已经创建了一个 BFC 了。

注意：浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。

作用

• “清除浮动”，这里其实说清除浮动已经不再合适，应该说包含浮动。也就是说只要父容器形成 BFC 就可以为父元素创建 BFC，可以让父元素包含子浮动元素
• 解决外边距合并问题
• 消除文字围绕float元素的效果

应用

• 自适应的两栏布局。
• 清除元素内部浮动。
• 嵌套元素margin边距合并问题的解决。

在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？

场景

• 同一个 BFC，且同处于普通流中的垂直相邻元素外边距合并。
• 父子元素的外边距合并。
• 空元素的外边距合并。

合并规则：

• 两个margin都是正值的时候，取两者的最大值；
• 当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从0位置，负向位移；
• 当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。
• 所有毗邻的margin要一起参与运算，不能分步进行。

不让相邻元素外边距合并的方法：

• 被非空内容、padding、border 或 clear 分隔开。
• 不在一个普通流中或一个 BFC 中。
• margin在垂直方向上不毗邻。

总结：

• 这些margin都处于普通流中，并在同一个BFC中；
• 这些margin没有被非空内容、padding、border 或 clear 分隔开；
• 这些margin在垂直方向上是毗邻的，包括以下几种情况：
  1. 一个 box 的top margin与第一个子box的top margin
  2. 一个box的bottom margin与最后一个子box的bottom margin，但须在该box的height 为auto的情况下
  3. 一个box的bottom margin与紧接着的下一个box的top margin
  4. 一个box的top margin与其自身的bottom margin，但须满足没创建BFC、零min-height、零或者“auto”的height、没有普通流的子元素。
• 例外的情况
  1. 根元素的外边距不会参与折叠
  2. 不设置任何属性的空span和空div不影响任何布局，可以无视之。

参考

CSS 外边距合并