浮动、定位、BFC 及边距合并

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

• 浮动元素可以向左或者向右移动，直到它的边框碰到父元素的边框或者其他浮动元素的边框，浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样；
• 对父容器：父容器无法感知浮动元素存在；
• 对其他浮动元素：如果包含块儿太窄无法容纳水平排列的三个浮动元素,那么其它浮动块儿向下移动,直到有足够的空间,如果浮动元素的高度不同,那么向下移动的时候可能被卡住；
• 普通元素：普通元素无法感知浮动元素存在；
• 文字：可以感知到浮动元素存在，会被浮动元素撑开。

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

• 解决浮动父容器高度塌陷问题；
• 方法：利用 clear属性，清除浮动；使父容器形成BFC。

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

• 定位方式：

  • inherit：规定应该从父元素继承 position 属性的值（不常用）
  • static：默认值,没有定位，元素出现在正常的流中（忽略 top,bottom, left, right 或者 z-index 声明）；
  • relative：生成相对定位的元素，相对于元素本身正常位置进行定位,因此，left:20px 会向元素的 left 位置添加20px；
  • absolute：生成绝对定位的元素，相对于static定位以外的第一个祖先元素（offset parent）进行定位,元素的位置通过 left, top, right 以及 bottom 属性进行规定；
  • fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定；
  • sticky：CSS3新属性，表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative;而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置

• CSS有三种基本的定位机制：普通流，浮动，绝对定位(absolute,fixed)

  • 普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，元素 position 的属性为 static 或继承来的static时就会按照普通流定位，这也是我们最常见的方式；
  • 相对定位：对应 position 的属性的值为 relative ，如果对一个元素进行相对定位，他将出现在他所在的位置上，然后通过设置垂直或者水平位置，让这个元素相对于它自己进行移动，在相对定位中，无论元素是否移动，元素在文档流中占据原来空间，只是表现出来的位置会改变 。
  • 绝对定位与固定定位：
    • 相对定位可以看作特殊的普通流定位，元素位置是相对于它在普通流中位置发生变化，而绝对定位使元素的位置与文档流无关，也不占据文档流空间，普通流中的元素布局就像绝对定位元素不存在一样；
    • 绝对定位的元素的位置是相对于距离最近的非 static 祖先元素的位置决定的，如果元素没有已定位的父元素，那么他的位置就相对于初始包含块 html 来定位 因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过 z-index 属性控制叠放顺序，z-index 越高，元素位置越靠上；
    • 绝对定位宽度 width: 100% (实际上指的是相对于父容器的padding+content的宽度。当子元素是非绝对定位的元素时width:100%才是指子元素的 content 等于父元素的 content宽度) 绝对定位可以形成BFC可用来清除浮动 可用来阻止外边距合并 绝对定位可以形成垂直居中，left: 50%; top: 50%; margin: (自身宽高度的一半)px ；
  • 固定定位：固定定位与绝对定位相似，但元素的包含块为 viewport 视口。该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。

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

• z-index 规定了元素在Z轴（距离用户远近）上的顺序，值越大则越靠近用户，表现就是元素在最上面;
• z-index 仅在设置了 position 的值非 static 属性的元素上生效;
• z-index 除了 auto 以外的值赋给一个元素，就会创建了一个新的层叠上下文;
• 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文；
• 每个层叠上下文和兄弟元素独立，也就是当进行层叠变化或渲染的时候，只需要考虑后代元素;
• 每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。

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

• position:relative，元素显示位置发生变化，但是元素在文档流中的位置不变，不影响后面元素在文档流中的布局；
• 负margin，元素的显示位置和在文档流中的位置均发生变化，会影响后面元素在文档流中的位置。

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

• BFC：block formatting context(块级格式化上下文)，是页面 CSS 视觉渲染(visual CSS rendering)这个过程中的一个概念。它是决定块盒子的布局及浮动元素相互影响的一个因素。具有对内部元素的包裹性及对外部元素的独立性
• 作用：
  1. 解决margin重叠问题，在同一个BFC中，相邻元素之间的边距会合并，如果把这两个元素分别放在两个BFC中，name他们的边距就不会合并。一般应用于嵌套关系。
  2. 清除浮动，BFC不会重叠浮动元素。

float 为 left/right
overflow 为 hidden/auto/scroll
display 为 table-cell/table-caption/inline-block
position 为 absolute/fixed(绝对定位)

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

• 外边距合并出现的三个场景：

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

• 合并规则：

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

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

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

• 范例

代码任务

代码1
代码2
代码3
代码4